如何使用 JavaScript 将触摸滑块捕捉到滚动位置？

Question

我正在创建一家商店，在我的登陆页面上，我想创建一个包含产品的支持触摸的滑块/轮播（如移动设备上的滑块/轮播 https://www.nike.com/es）。

我创建了一个带有 6 个“产品槽”(

.slider-container

) 的溢出容器 (

.slide

)，并且我已在 css 中将

overflow

设置为

scroll

。现在我希望每当有人滑动（

touchmove

）一点时，它就会捕捉到发布后的下一个产品（

touchend

）

我在 JS 中尝试过一些东西，但我完全是业余爱好者......（我不想使用 SliderJs 等 - 尝试自己做并学习一点）

这是 HTML 和 CSS：

        <div class="slider-container">

            <div class="slide">

                <img src="HOODIE_GRIS_FRONT_720x (1).png" style="width: 275px;">

                <p class="preview-product-title">Cool Shorts</p>
                <p class="preview-color">Blue Navy</p>
                <p class="preview-price">€29</p>
            </div>
            <div class="slide">

                <img src="HOODIE_GRIS_FRONT_720x (1).png" style="width: 275px;">

                <p class="preview-product-title">Cool Shorts</p>
                <p class="preview-color">Blue Navy</p>
                <p class="preview-price">€29</p>
            </div>
            <div class="slide">

                <img src="HOODIE_GRIS_FRONT_720x (1).png" style="width: 275px;">

                <p class="preview-product-title">Cool Shorts</p>
                <p class="preview-color">Blue Navy</p>
                <p class="preview-price">€29</p>
            </div>
            <div class="slide">

                <img src="HOODIE_GRIS_FRONT_720x (1).png" style="width: 275px;">

                <p class="preview-product-title">Cool Shorts</p>
                <p class="preview-color">Blue Navy</p>
                <p class="preview-price">€29</p>
            </div>
            <div class="slide">

                <img src="HOODIE_GRIS_FRONT_720x (1).png" style="width: 275px;">

                <p class="preview-product-title">Cool Shorts</p>
                <p class="preview-color">Blue Navy</p>
                <p class="preview-price">€29</p>
            </div>
            <div class="slide">

                <img src="HOODIE_GRIS_FRONT_720x (1).png" style="width: 275px;">

                <p class="preview-product-title">Cool Shorts</p>
                <p class="preview-color">Blue Navy</p>
                <p class="preview-price">€29</p>
            </div>

        </div>

*{
    margin: 0;
    padding: 0;
    font-family: "Roboto Condensed", sans-serif;
 }
 
 
 html{
     scroll-behavior:smooth;
     overflow-x: hidden;
 }
 
 body {
     overflow-x: hidden;
 }

.slider-container{
    display: flex;
    overflow: scroll;
}

.slide{
    min-width: 275px;
    margin: 20px 0 40px 0;
    padding-left: 10px;

}

.preview-product-title{
font-size: 17px;
 padding: 2px 0 2px 0;
}

.preview-color{
    font-size: 17px;
    color: gray;
    padding-bottom: 2px;


}


.preview-price{
    font-size: 17px;
    font-weight: bold;


}



.slide:first-child{
    margin: 20px 0 40px 15px;
}

.slide:last-child{
    margin: 20px 20px 40px 0;
}

这是我在 JS 上尝试过的，基本上，每当你尝试滚动时，你都会被送回开头 (

slider.scrollLeft = 0

)

let startPos = 0
let sliderScroll = 0
let prevPos = 0
let currentPos = 0

const slider = document.querySelector('.slider-container')
const slideWidth = document.querySelector('.slide').getBoundingClientRect().width

function getPositionX(event) {
    return
    event.touches[0].clientX
}

function touchStart(event) {
    startPos = getPositionX(event)
    sliderScroll = slider.scrollLeft
}

function touchMove(event) {
    currentPos = getPositionX(event)
}

function touchEnd() {
    let calcNumber = Math.round((sliderScroll + Math.abs(startPos - currentPos)) / slideWidth)
    let setScrollPos = calcNumber * slideWidth
    
    
    slider.scrollTo({
        left: setScrollPos,
        behaviour: 'smooth'
    })

}

slider.addEventListener('touchstart', touchStart)
slider.addEventListener('touchmove', touchMove)
slider.addEventListener('touchend', touchEnd)

Answer 1

要使用 JavaScript 将触摸滑块捕捉到滚动位置，您可以对代码进行以下调整：

1. 更新

   getPositionX

   函数以正确返回clientX位置。
2. 在

   touchMove

   函数中正确计算移动的距离。
3. 使用

   scrollLeft

   属性而不是

   scrollTo

   方法来设置滚动位置。

这是修改后的 JavaScript 代码：

let startPos = 0;
let sliderScroll = 0;
let prevPos = 0;
let currentPos = 0;

const slider = document.querySelector('.slider-container');
const slideWidth = document.querySelector('.slide').getBoundingClientRect().width;

function getPositionX(event) {
    return event.touches[0].clientX;
}

function touchStart(event) {
    startPos = getPositionX(event);
    sliderScroll = slider.scrollLeft;
}

function touchMove(event) {
    currentPos = getPositionX(event);
}

function touchEnd() {
    let distanceMoved = currentPos - startPos;
    let slideIndex = Math.round(distanceMoved / slideWidth);
    let setScrollPos = slideIndex * slideWidth;

    slider.scrollLeft = setScrollPos;
}

slider.addEventListener('touchstart', touchStart);
slider.addEventListener('touchmove', touchMove);
slider.addEventListener('touchend', touchEnd);

这些修改应该有助于实现您想要的触摸滑块/轮播的捕捉行为。