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

问题描述

我有一个范围滑块，可以滚动 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;
    });

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript range scrollable