Kaydırılabilir element oluşturma (Vanilla JS/HTML/CSS)

Bu işlemler yalnızca mobil cihazlar için geçerlidir.

Herşeyden önce son halini bir görelim.

son hali

Bu yazıda sadece javascript tarafını inceliyor olacağız. Aşağıda style.css son halini bulabilirsiniz.

css

/* reset css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    background-color: #ddd;
    color: #0d0d0d;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.swipable {
    width: 50%;
    padding: 20px 15px;
    border-radius: 10px;
    background-color: coral;
    color: white;
    box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.8);
    user-select: none;
    margin-top: 20px;
    overflow: hidden;
}

.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: height .5s;
    overflow: hidden;
    padding-bottom: 20px;
}

Ve index.html dosyamızın son hali de burada.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Swipable Demo</title>
</head>

<body>

<div class="container">
    <div class="swipable">This is a swipable item.</div>
    <div class="swipable">This is a swipable item.</div>
    <div class="swipable">This is a swipable item.</div>
    <div class="swipable">This is a swipable item.</div>
    <div class="swipable">This is a swipable item.</div>
    <div class="swipable">This is a swipable item.</div>
    <div class="swipable">This is a swipable item.</div>
</div>

<script src="app.js"></script>
</body>

</html>

İşte Vanilla JS yazarak yaptığımız işlemler de burada.

Önce, .swipable class’larımızı seçelim.

let treshold = window.innerWidth / 4;

document.querySelectorAll(".swipable").forEach((swipableItem, index) => {
    // TODO :)
});

Kodumuzun üstünde kaydırma hassasiyetimizi ayarlama için treshold değişkeni tanımladık.

Bu örneğimizde, kaydırılabilir elementimiz, sadece X ekseninde kaydırılabilecek.

Bunun için 3 temel değişkenimiz var.

document.querySelectorAll(".swipable").forEach((swipableItem, index) => {
    let touchstartX = 0
    let touchendX = 0
    let diff = 0;
});

diff değişkeni sürükleme mesafesinin sonucu olacak.

Diğer değişkenler ise basitçe sürüklemeyi başlattığımız ve bitirdiğimiz noktalar olacak.

swipableItem.addEventListener('touchstart', e => {
    touchstartX = e.changedTouches[0].screenX
    swipableItem.style.transition = "all 0s"
})

Dokunma işlemini yakalamak için touchstart etkinliğini dinliyoruz. Bu etkinlikte ilk dokunma noktasını tespit edip touchstartX değişkenine atayabiliriz. Daha sonra, dokunuşumuzu izlemek için geçiş süresini 0 saniyeye ayarlıyoruz.

Bu da bizim touchend etkinliğimiz.

swipableItem.addEventListener('touchmove', e => {
    diff = e.touches[0].screenX - touchstartX;
    swipableItem.style.transform = `translateX(${diff}px)`;
})

Yukarıda touchmove etkinliğini dinledik. Bu etkinlikte touchstart ve şuanda hangi noktaya dokunuyorsak arasındaki mesafeyi ölçebiliriz. Devamında çıkan sonucu diff değişkenine atayabiliriz.

Böylelikle, çıkan sonuç ile kaydırılmasını istediğimiz elementin kaydırma esnasında ekranda X eksenin hangi konumda bulunacağını ayarlayabiliriz.

Şimdi de dokunma etkinliklerimizde sonuncusunu ayarlayalım.

swipableItem.addEventListener('touchend', e => {
    touchendX = e.changedTouches[0].screenX
    swipableItem.style.transition = "all .5s"

    handleGesture(index)
})

Yukarıda dokunmayı bitirdiğimiz noktayı touchendX değişkenine kaydettik.

Ve yeterince kaydırılmazsa eski konuma yavaşça geri dönmesi için animasyon süresini ayarladık.

handleGesture fonkisyonu bizin son fonksiyonumuz olacak. Bu fonksiyon kaydırma işlemine karar verecek.

function handleGesture(index) {
    let swipePath = "";
    if (touchendX < touchstartX) swipePath = "left";
    if (touchendX > touchstartX) swipePath = "right";

    if ((diff > treshold) || (diff < -treshold)) {
        console.log(`Item ${index}: Swiped ${swipePath}`)
        swipableItem.style.transition = "all .3s"
        if (swipePath == "left") {
            swipableItem.style.transform = `translateX(-${window.innerWidth}px)`
        } else {
            swipableItem.style.transform = `translateX(${window.innerWidth}px)`
        }
        setInterval(() => {
            swipableItem.style.height = "0px";
            swipableItem.style.padding = "0px";
            swipableItem.style.margin = "0px";
            setInterval(() => {
                swipableItem.remove();
            }, 500);
        }, 500)
    } else {
        swipableItem.style.transform = `translateX(0px)`
    }
}

Ve son hali…

son hali

Kodları incelemek için GitHub reposuna buradan ulaşabilirsiniz.

Kaydırılabilir element oluşturma (Vanilla JS/HTML/CSS)

İşte Vanilla JS yazarak yaptığımız işlemler de burada.

Kaan Kuscu

Backend Developer