我目前正在开发一个项目，我想要一个水平滑块。我使这个滑块可拖动，并找到了一些代码使其能够随动量滑动。我设法用鼠标滚轮进行水平滚动，但我不知道如何使其与动量效果一起工作。我能怎么做 ？
Lorem ipsum dolor sat amet，consectetur adipiscing elit。前庭 nec dapibus leo。 Nunc odio Massa，tempor eu aliquam vel，viverra vitae est. Suspendisse dignissim nisi arcu。 Vivamus non sem et mi auctor varius。在我们的祖国、在希梅内奥斯的概念中，阶级是有默契的社会关系的。 Proin blanditmalesuada sem，vel gravida totortor volutpat nec。 Ut eu 前庭 neque。
（抱歉，但我认为我无法更准确，我需要向您展示代码以使您理解）
// Slider dragging
const slider = document.querySelector('.slider');
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;
cancelMomentumTracking();
});
slider.addEventListener('mouseleave', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
isDown = false;
slider.classList.remove('active');
beginMomentumTracking();
});
slider.addEventListener('mousemove', (e) => {
if(!isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX); //scroll-fast
var prevScrollLeft = slider.scrollLeft;
slider.scrollLeft = scrollLeft - walk;
velX = slider.scrollLeft - prevScrollLeft;
});
// Momentum
var velX = 0;
var momentumID;
slider.addEventListener('wheel', (e) => {
cancelMomentumTracking();
});
function beginMomentumTracking(){
cancelMomentumTracking();
momentumID = requestAnimationFrame(momentumLoop);
}
function cancelMomentumTracking(){
cancelAnimationFrame(momentumID);
}
function momentumLoop(){
slider.scrollLeft += velX * 2;
velX *= 0.95;
if (Math.abs(velX) > 0.5){
momentumID = requestAnimationFrame(momentumLoop);
}
}
//Scroll
const scrollContainer = document.querySelector(".slider");
scrollContainer.addEventListener("wheel", (evt) => {
evt.preventDefault();
scrollContainer.scrollLeft += evt.deltaY;
});.slider {
display: flex;
width: 100vw;
height: 75vh;
cursor: grab;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
}
.slider:active {
cursor: grabbing;
}
.slider::-webkit-scrollbar {
display: none;
}
.slide {
margin: auto;
margin-left: 3rem;
flex-shrink: 0;
width: 70%;
height: 80%;
background-color: crimson;
}
.slide:last-child {
margin-right: 3rem;
}<div class="slider" data-scroll-container="">
<div class="slide" id="slide-1"></div>
<div class="slide" id="slide-2"></div>
<div class="slide" id="slide-3"></div>
<div class="slide" id="slide-4"></div>
<div class="slide" id="slide-5"></div>
</div>将其添加到您的函数中。它并不像我希望的那么顺利，但它完成了工作：
scrollContainer.addEventListener("wheel", (evt) => {
// scrollContainer.scrollLeft += evt.deltaY;
window.requestAnimationFrame(() => {
scrollContainer.scrollTo({ top: 0, left: scrollContainer.scrollLeft + (evt.deltaY * 2), behavior: "smooth" });
});
});
我所做的是我更换了scrollLeft行动与scrollTo其中有一个smooth行为参数。我还添加了evt.deltaY * 2因为就我而言，滚动不够。
我想要改进的是使用滚轮时的滚动捕捉以及更少的“卡顿”。
请参阅此处的演示（滚动到蓝色/紫色框）-JavaScript 平滑水平滚动
