可滚动的 DIV 可以更新范围滑块吗？答案

【问题标题】：Can a scrollable DIV update a Range Slider?可滚动的 DIV 可以更新范围滑块吗？
【发布时间】：2021-06-10 21:35:24
【问题描述】：

我有一个范围滑块正在滚动 DIV 中的内容。

如果您单击可滚动区域，您将看到可以左右拖动可滚动 DIV。但是，当您这样做时，范围不会更新。手动滚动 DIV 时有没有办法更新范围？我试图让 onscroll() 位置更新范围，但没有运气。

https://jsfiddle.net/esoteric/fxtonew7/5/

//Range Slider
    var scroll = document.getElementById("scroll-range");
    var panel = document.getElementById("scrolling-container");

    var total = panel.scrollWidth - panel.offsetWidth;
    var percentage = total * (this.value / 100);
    var percentageWidth = total / 10; //10% for each +/- click

    scroll.oninput = function() {

        panel = document.getElementById("scrolling-container");
        total = panel.scrollWidth - panel.offsetWidth;
        percentage = total * (this.value / 100);
        panel.scrollLeft = percentage;
    }

    //Foward Arrow
    document.getElementById("increase").addEventListener("click",
        function() {
            scroll.stepUp(10);
            panel.scrollBy(percentageWidth, 0)
        });

    //Back Arrow
    document.getElementById("decrease").addEventListener("click",
        function() {
            scroll.stepUp(-10);
            panel.scrollBy(-percentageWidth, 0)
        });

        
    //Desktop grab and scroll
    const slider = document.getElementById("scrolling-container");
    let isDown = false;
    let startX;
    let scrollLeft;

    slider.addEventListener('mousedown', (e) => {
        isDown = true;
        slider.classList.add('active');
        startX = e.pageX - slider.offsetLeft;
        scrollLeft = slider.scrollLeft;
    });

    slider.addEventListener('mouseleave', () => {
        isDown = false;
        slider.classList.remove('active');
    });

    slider.addEventListener('mouseup', () => {
        isDown = false;
        slider.classList.remove('active');
    });

    slider.addEventListener('mousemove', (e) => {
        if (!isDown) return;
        e.preventDefault();
        const x = e.pageX - slider.offsetLeft;
        const walk = (x - startX) * 3;
        slider.scrollLeft = scrollLeft - walk;
    });

【问题讨论】：

滑块和左/右按钮似乎对我来说都很好。我没有看到一个行为与另一个不同。你想更新什么the range？

标签： javascript range scrollable

【解决方案1】：

您需要计算拖动滑块时所做的相反操作

panel.addEventListener('scroll', (e)=>{
    total = panel.scrollWidth - panel.offsetWidth;
    percentage = panel.scrollLeft / total
    scroll.value = percentage * 100
})

更新小提琴：https://jsfiddle.net/gaby/dwvtLn4g/8/

【讨论】：

赞成，因为你会像我一样 100% 写这些行 :)
@marks :D 你在错误的元素上添加了事件：p

【解决方案2】：

侦听 div 上的滚动事件，然后通过将滚动位置除以可能的最大滚动来确定滚动完成了多少百分比，然后将值（当您的范围从 0 到 100 时）设置为该百分比

    slider.addEventListener('scroll', e => {
       const maxScrollLeft = slider.scrollWidth - scroll.clientWidth
       const percentage =  slider.scrollLeft / maxScrollLeft
       scroll.value = percentage * 100 // as percentage is normalized from 0 to 1
    })

【讨论】：

【解决方案3】：

您要做的是测试您滚动到的“面板”并更新滚动条位置

您可以通过添加另一个面板事件侦听器来做到这一点

    panel.addEventListener('mousemove', (e) => {
    // get scroll position in px
    console.log(panel.scrollLeft, panel.scrollTop);
    });

这将打印控制台中的左侧位置

【讨论】：