
滚动条滑动平滑化
你想为元素添加一个动画效果,以平滑滚动条的移动。为实现这一点,可利用 scroll-behavior 属性。
方法:
在 css 中,为滚动容器设置 scroll-behavior 属性为 smooth:
触发式加载精美特效企业网站源码使用jquery实现了很多精美的触发式加载特效,网站首页在随着访客的滚动条滚动过程中会出现很多触发式加载的特殊效果,让这个网站的风格瞬间显得非常的高大上,让你的企业品牌在访客心中留下更深的影响。当然,我们在使用jquery特效的同时也要注意程序对搜索引擎的友好型,所以这一点儿作者也有考虑到,已经尽可能的对js和css脚本进行精简和优化,尽可能的加快网站加载速度,同时也
#container {
scroll-behavior: smooth;
}示例:
以下代码演示了如何使用 scroll-behavior 属性实现滚动条平滑滚动:
click the button to slide right!
#container {
width: 100px;
height: 100px;
border: 1px solid #ccc;
overflow-x: scroll;
scroll-behavior: smooth;
}
#content {
width: 250px;
background-color: #ccc;
}const button = document.getElementById("slide");
button.onclick = function () {
document.getElementById("container").scrollLeft += 20;
};通过设置 scroll-behavior 为 smooth,当使用 javascript 更改元素的 scrollleft 值时,滚动将平滑进行,从而消除生硬的移动效果。









