HTML滚动条JS控制方法详解

/* 整体滚动条 */
::-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>

// 平滑滚动到页面顶部
window.scrollTo({
  top: 0,
  behavior: 'smooth'
});
<p>// 滚动到特定元素
const targetElement = document.getElementById('section2');
targetElement.scrollIntoView({
behavior: 'smooth',
block: 'start'
});</p>

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>

/* CSS中定义不同状态的滚动条 */
.scrolled ::-webkit-scrollbar-thumb {
  background: #007acc;
}
<p>.no-scroll ::-webkit-scrollbar {
display: none;
}</p>

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>