一个可滚动的DIV可以更新一个范围滑块吗?

Question

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

Answer 1

你需要计算的是当你拖动滑块

时所做的相反的事情

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

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

Answer 2

你需要做的是测试其中的" panel ";滚动到并更新滚动条位置的位置

可以通过添加另一个面板事件监听器

来实现

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

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

Answer 3

监听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
})