创建平滑滚动效果



我有一个水平滚动内容的代码,它可以工作,但无论何时滚动,它都会像breaking一样一个接一个地滚动项目,所以我希望它能顺利滚动,这就是下面的示例代码,请帮助我使用

<style>
.child {
width: 100px;
white-space: nowrap;
overflow-x: scroll;
}
</style>
<script>
(function(w){
w.addEventListener('load', function(){
const   btn_left = document.getElementById('btn-left'),
btn_right = document.getElementById('btn-right'),
content = document.getElementById('con');
const content_scroll_width = content.scrollWidth;
let content_scoll_left = content.scrollLeft;
btn_right.addEventListener('click', () => {
content_scoll_left += 100;
if (content_scoll_left >= content_scroll_width) { content_scoll_left = content_scroll_width; }
content.scrollLeft = content_scoll_left;
});
btn_left.addEventListener('click', () => {
content_scoll_left -= 100;
if (content_scoll_left <= 0) {
content_scoll_left = 0;
}
content.scrollLeft = content_scoll_left;
});
});
})(window);
</script>
<div class="parent">
<div class="child" id="con">
Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
</div>
</div>
<button id="btn-left">Left scroll</button>
<button id="btn-right">Right scroll</button>

也许您可以在css文件中尝试scroll-behavior: smooth。下面是一个例子。

或者,如果你想用JavaScript做这件事,试试

window.scroll({
top: 2500, 
left: 0, 
behavior: 'smooth'
});

最新更新