网页滚动条拖动体验怎么优化_html滚动条交互优化方法与代码

/* 整体滚动条 */
::-webkit-scrollbar {
  width: 8px;
}
<p>/<em> 滚动条轨道 </em>/
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}</p><p>/<em> 滚动条滑块 </em>/
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}</p><p>/<em> 鼠标悬停时滑块 </em>/
::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}

/* CSS方式 */
html {
  scroll-behavior: smooth;
}
<p>/<em> JS方式（可用于特定触发） </em>/
window.scrollTo({
top: 500,
behavior: 'smooth'
});

/* 始终显示滚动条（防止宽度跳变） */
html {
  overflow-y: scroll;
}
<p>/<em> 或使用更优雅的方式：保留空间但不强制显示 </em>/
html {
scrollbar-gutter: stable;
}

const container = document.querySelector('.scroll-container');
let isDown = false;
let startY;
let scrollTop;
<p>container.addEventListener('mousedown', e => {
isDown = true;
startY = e.pageY - container.offsetTop;
scrollTop = container.scrollTop;
});</p><p>container.addEventListener('mouseleave', () => {
isDown = false;
});</p><p>container.addEventListener('mouseup', () => {
isDown = false;
});</p><p>container.addEventListener('mousemove', e => {
if (!isDown) return;
e.preventDefault();
const y = e.pageY - container.offsetTop;
const walk = (y - startY) * 2;
container.scrollTop = scrollTop - walk;
});