通过CSS自定义滚动条样式并结合JavaScript动态控制滚动行为，可实现美观且交互丰富的页面效果。首先使用::-webkit-scrollbar等伪元素定义滚动条外观，仅适用于WebKit浏览器；再利用JS获取scrollTop值、设置smooth平滑滚动及监听scroll事件，实现如返回顶部、导航变化等功能；通过添加类名动态切换滚动条颜色或隐藏滚动条，提升视觉体验。注意兼容非WebKit浏览器时需借助JS模拟或第三方库，并优化scroll事件性能，避免频繁重绘。移动端需测试适配，确保流畅交互。
网页滚动条样式和动态控制可以通过CSS与JavaScript结合实现。虽然原生滚动条的样式在不同浏览器中表现不一，但现代浏览器支持通过CSS自定义滚动条外观，再配合JS监听滚动行为，实现动态交互效果。
自定义滚动条样式（CSS部分）
使用CSS伪元素可以修改WebKit内核浏览器（如Chrome、Edge、Safari）的滚动条样式：
/* 整体滚动条 */
::-webkit-scrollbar {
width: 10px;
}
<p>/<em> 滚动条轨道 </em>/
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 5px;
}</p><p>/<em> 滚动条滑块 </em>/
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 5px;
}</p><p>/<em> 滑块悬停状态 </em>/
::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}</p>注意：Firefox 和部分旧版浏览器不支持上述伪元素，需用JS模拟滚动容器或使用第三方库兼容。
JavaScript动态控制滚动位置
JS可实时获取和设置页面或元素的滚动位置，常用于平滑滚动、返回顶部、锚点跳转等场景。
立即学习“前端免费学习笔记（深入）”；
-
获取当前滚动位置：
window.pageYOffset或element.scrollTop -
设置滚动位置：
window.scrollTo(x, y)或element.scrollTop = value - 平滑滚动：添加 behavior 参数实现动画效果
// 平滑滚动到页面顶部
window.scrollTo({
top: 0,
behavior: 'smooth'
});
<p>// 滚动到特定元素
const targetElement = document.getElementById('section2');
targetElement.scrollIntoView({
behavior: 'smooth',
block: 'start'
});</p>动态响应滚动事件
通过监听 scroll 事件，可根据滚动位置动态修改样式或执行逻辑，比如隐藏/显示按钮、改变导航栏透明度。
const backToTopBtn = document.getElementById('back-to-top');
<p>// 监听页面滚动
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
backToTopBtn.style.display = 'block';
} else {
backToTopBtn.style.display = 'none';
}
});</p><p>// 点击回到顶部
backToTopBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});</p>结合类名动态切换滚动条样式
某些场景下需要根据状态改变滚动条颜色或宽度，可通过JS切换容器类名，配合CSS实现样式变化。
/* CSS中定义不同状态的滚动条 */
.scrolled ::-webkit-scrollbar-thumb {
background: #007acc;
}
<p>.no-scroll ::-webkit-scrollbar {
display: none;
}</p>JS动态添加类：
window.addEventListener('scroll', () => {
if (window.pageYOffset > 100) {
document.body.classList.add('scrolled');
} else {
document.body.classList.remove('scrolled');
}
});
<p>// 禁用滚动并隐藏滚动条
document.body.classList.add('no-scroll');</p>基本上就这些。通过CSS美化滚动条，用JS控制行为和响应滚动状态，能实现丰富的用户体验。注意移动端兼容性和性能，避免在 scroll 事件中执行过多重绘操作。
