我有一个也可以通过拖动滚动的水平滚动区域。我想为这个拖动和滚动添加平滑度，我的意思是我希望它在我离开拖动并缓慢停止后继续在 x 轴上移动。
这是整个场景的一小部分，因为它现在没有“平滑度”
const slider = document.querySelector(".wrapper");
const preventClick = (e) => {
e.preventDefault();
e.stopImmediatePropagation();
}
let isDown = false;
var isDragged = 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", e => {
isDown = false;
const elements = document.getElementsByClassName("book");
if(isDragged){
for(let i = 0; i<elements.length; i++){
elements[i].addEventListener("click", preventClick);
}
}else{
for(let i = 0; i<elements.length; i++){
elements[i].removeEventListener("click", preventClick);
}
}
slider.classList.remove("active");
isDragged = false;
});
slider.addEventListener("mousemove", e => {
if (!isDown) return;
isDragged = true;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 2;
slider.scrollLeft = scrollLeft - walk;
});
document.getElementsByClassName("book").ondragstart = function() {
console.log("Drag start");
};
.wrapper {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: auto;
min-width: 100%;
}
.book {
width: auto;
height: 100vh;
min-width: 50vw;
}
.one {
background-color: #d07fe0;
}
.two {
background-color: #808888;
}
慕虎7371278
相关分类