如何为拖动和滚动添加平滑度

我有一个水平滚动区域，也可以通过拖动来滚动。我想为这种拖动和滚动增加平滑度，我的意思是我希望它在我离开拖动并缓慢停止后在 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;
}
.three {
background-color: #83e7dc;
}
.four {
background-color: #edf7a8;
}
.five {
background-color: #e9d98f;
}
.six {
background-color: #fdd;
}

<body>
<div class="wrapper">
<a href="https://stackoverflow.com/" class="book one"></a>
<a href="https://stackoverflow.com/" class="book two"></a>
<a href="https://stackoverflow.com/" class="book three"></a>
<a href="https://stackoverflow.com/" class="book four"></a>
<a href="https://stackoverflow.com/" class="book five"></a>
<a href="https://stackoverflow.com/" class="book six"></a>
</div>
</body>

我将不胜感激任何帮助谢谢近红外

您可以添加一个velocity变量，该变量告诉每帧滚动了多少像素：

let velocity = 0;
slider.addEventListener("mousemove", e => {
if (!isDown) return;
isDragged =  true;
e.preventDefault();
let lastX = slider.scrollLeft;
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 2;
slider.scrollLeft = scrollLeft - walk;
velocity = lastX - slider.scrollLeft;
});

然后，您可以添加一个函数，以便在使用停止点击后继续移动内容：

function smooth() {
console.log(velocity);
if (Math.abs(velocity) > 0) {
if (Math.abs(velocity) < 2) {
velocity = 0;
}
if (velocity > 0) {
velocity  -= 2;
}
else {
velocity += 2;
}
slider.scrollLeft -= velocity;
requestAnimationFrame(smooth);
}
}

之后，调用函数 onmouseup：

slider.addEventListener("mousemove", e => {
if (!isDown) return;
isDragged =  true;
e.preventDefault();
let lastX = slider.scrollLeft;
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 2;
slider.scrollLeft = scrollLeft - walk;
velocity = lastX - slider.scrollLeft;
});

完整代码如下

const slider = document.querySelector(".wrapper");
const preventClick = (e) => {
e.preventDefault();
e.stopImmediatePropagation();
}
let isDown = false;
var isDragged = false;
let startX;
let scrollLeft;
		  let velocity = 0;
slider.addEventListener("mousedown", e => {
velocity = 0; // Cancel previous velocity
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;
			requestAnimationFrame(smooth);
});
slider.addEventListener("mousemove", e => {
if (!isDown) return;
isDragged =  true;
e.preventDefault();
			let lastX = slider.scrollLeft;
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 2;
slider.scrollLeft = scrollLeft - walk;
			velocity = lastX - slider.scrollLeft;
});
document.getElementsByClassName("book").ondragstart = function() {
console.log("Drag start");
};
		  function smooth() {
			  if (Math.abs(velocity) > 0) {
// Change the 2s here to change how quickly the scrolling stops
				  if (Math.abs(velocity) < 2) {
					  velocity = 0;
				  }
				  if (velocity > 0) {
					velocity  -= 2;
				  }
				  else {
					velocity += 2;
				  }
		  slider.scrollLeft -= velocity;
				  requestAnimationFrame(smooth);
			  }
		  }

.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;
}
.three {
	 background-color: #83e7dc;
}
.four {
	 background-color: #edf7a8;
}
.five {
	 background-color: #e9d98f;
}
.six {
	 background-color: #fdd;
}

<div class="wrapper">
<a href="https://stackoverflow.com/" class="book one"></a>
<a href="https://stackoverflow.com/" class="book two"></a>
<a href="https://stackoverflow.com/" class="book three"></a>
<a href="https://stackoverflow.com/" class="book four"></a>
<a href="https://stackoverflow.com/" class="book five"></a>
<a href="https://stackoverflow.com/" class="book six"></a>
</div>

相关内容

最新更新

热门标签：