在没有jquery的情况下拖动元素时连续滑动

Question

我正在尝试获得平滑的拖动效果。当我拖动手机上的滑块时，当我移开手指时，它会停止。我希望它一直滑动到滑块的末端。

当我移开手指时，我在这里的那个就停止了。此外，滑块有点滞后，运动不自然

const slider = document.querySelector('.items');
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;
console.log("erreerre", 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;  // stop the fn from running
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 2;
slider.scrollLeft = scrollLeft - walk;

console.log('sdsd', scrollLeft)
console.log(slider.scrollLeft)
});

slider.addEventListener('touchstart', (e) => {
isDown = true;
slider.classList.add('active');
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener('touchend', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('touchcancel', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('touchmove', (e) => {
if (!isDown) return;  // stop the fn from running
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 2;
slider.scrollLeft = scrollLeft - walk;
});

.items {
height:600px;
padding: 100px;
width:100%;
/*border:1px solid white;*/
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
user-select: none;
cursor: pointer;
transition: all 0.2s;
transform: scale(0.98);
will-change: transform;
position: relative;
background: rgba(255,255,255,0.1);
font-size: 0;
perspective: 500px;
transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.275)
}
.items.active {
background: rgba(255,255,255,0.2);
cursor: grabbing;
cursor: -webkit-grabbing;
transform: scale(1);
}
.item {
width:300px;
margin:0 80px 0 80px;
height: calc(100% - 40px);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 80px;
font-weight: 100;
color:rgba(0,0,0,0.5);
box-shadow:  5px 3px 4px 10px black;
}

<div class="items">
<div class="item item1"><img src="images/cert1.png"></div>
<div class="item item2"><img src="images/cert2.png"></div>
<div class="item item3"><img src="images/cert3.png"></div>
<div class="item item4"><img src="images/cert4.png"></div>
<div class="item item5"><img src="images/cert5.png"></div>
<div class="item item6"><img src="images/cert6.png"></div>
<div class="item item7"><img src="images/cert7.png"></div>
<div class="item item8"><img src="images/cert8.png"></div>
<div class="item item9"><img src="images/cert9.png"></div>
</div>

实时预览https://www.alfajer-dc.com/evraz/滑块是证书所在的位置。

Answer 1

您应该能够在没有Javascript的情况下实现所需的效果，并依靠浏览器实现来管理滚动。

下面我修改了您的代码片段，添加了一个带width=100%的包装元素.items-wrap。然后将现有的.items元素更改为display:flex。您也可以在单个项目上保留现有的inline:flex样式，但大多数浏览器在几年内都能很好地使用flex属性。

.items-wrap {
height:600px;
padding:100px;
width:100%;
}
.items {
display:flex;
flex-direction:row;
user-select: none;
}
.item {
width:300px;
margin:0 80px 0 80px;
box-shadow:  5px 3px 4px 10px black;
}
.item img {
height:auto;
width:300px;
}

<div class="items">
<div class="item item1"><img src="https://www.alfajer-dc.com/evraz/images/cert1.png"></div>
<div class="item item2"><img src="https://www.alfajer-dc.com/evraz/images/cert2.png"></div>
<div class="item item3"><img src="https://www.alfajer-dc.com/evraz/images/cert3.png"></div>
<div class="item item4"><img src="https://www.alfajer-dc.com/evraz/images/cert4.png"></div>
<div class="item item5"><img src="https://www.alfajer-dc.com/evraz/images/cert5.png"></div>
<div class="item item6"><img src="https://www.alfajer-dc.com/evraz/images/cert6.png"></div>
<div class="item item7"><img src="https://www.alfajer-dc.com/evraz/images/cert7.png"></div>
<div class="item item8"><img src="https://www.alfajer-dc.com/evraz/images/cert8.png"></div>
<div class="item item9"><img src="https://www.alfajer-dc.com/evraz/images/cert9.png"></div>
</div>