Как сделать горизонтальный скролл стрелками?

Question

Как можно сделать горизонтальный скролл стрелками? Т.е чтобы вместо полосы прокрутки были стрелки которые бы выполняли функцию скролла в право и лево.

Answer 1

Вот пример скролла с использованием кнопок:

let back = document.querySelector("#back");
let forward = document.querySelector("#forward");
let imageWrapper = document.querySelector(".imageWrapper");
let posX = 0;
let stepPersent = 5;
let backTimeout, forwardTimeout;

back.addEventListener("mousedown", function (e) {
    // таймер для отслеживания удержания кнопки мыши
    backTimeout = setInterval(() => {
        //проверка выхода скролла за границы
        if((posX + stepPersent) <= 0) { 
            posX = posX + stepPersent;
            imageWrapper.style.left = posX + "%";
        }
    }, 50);
});
//удаление таймера при поднятии кнопки мыши
back.addEventListener("mouseup", function (e) {
     clearInterval(backTimeout);
});

forward.addEventListener("mousedown", function (e) {
    //таймер для отслеживания удержания кнопки мыши
    forwardTimeout = setInterval(() => {
        if((posX - stepPersent) >= -405){
            posX = posX - stepPersent;
            imageWrapper.style.left = posX + "%";
        }
    }, 50);
});
// удаление таймера при поднятии кнопки мыши
forward.addEventListener("mouseup", function (e) {
    clearInterval(forwardTimeout);
});

#wrapper {
    width: max-content;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 1px solid black;
    padding: 5px;
}

#window{
    display: flex;
    width: 400px;
    height: 200px;
    border: 1px solid black;
    overflow: hidden;
}

.imageWrapper{
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: max-content;
    position: relative;
    top: 0;
    left: 0;
}

#image1{
    width: 400px;
    background-color: green;
    flex-grow: 1;
}

#image2{
    width: 600px;
    background-color: purple;
    flex-grow: 1;
}

#image3{
    width: 200px;
    background-color: red;
    flex-grow: 1;
}

#image4{
    width: 800px;
    background-color: darkgoldenrod;
    flex-grow: 1;
}

#scrollBar{
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    grid-template-areas: "back . forward";
}

#back,
#forward{
    appearance: none;
    border: 1px solid black;
    padding: 5px 20px;
    background-color: lightgray;
}

#back{
    grid-area: back;
}

#forward{
    grid-area: forward;
}

#back:active,
#forward:active{
    background-color: gray;
}

<div id="wrapper">
    <div id="window">
        <div class="imageWrapper">
            <div id="image1"></div>
            <div id="image2"></div>
            <div id="image3"></div>
            <div id="image4"></div>
        </div>
    </div>
    <div id="scrollBar">
        <button id="back"><</button>
        <button id="forward">></button>
    </div>
</div>

БЛОГ НА HUSL

Как сделать горизонтальный скролл стрелками?

Ответы (1 шт):