[英]Create smooth scrolling effect
I have a code to scroll content horizontally, it works but whenever it scrolls, it scrolls items one by on like breaking, so I want it to scroll smoothly, that is the sample code below, please I need help with it我有一个水平滚动内容的代码,它可以工作,但每当它滚动时,它会像中断一样一个接一个地滚动项目,所以我希望它平滑滚动,这是下面的示例代码,请我需要帮助
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.