jquery滚动条
jQuery 滚动条操作
获取滚动条位置
使用scrollTop()方法获取垂直滚动条的位置，scrollLeft()获取水平滚动条位置：
$(window).scrollTop(); // 垂直位置
$(window).scrollLeft(); // 水平位置设置滚动条位置
通过传递参数设置滚动位置：
$(window).scrollTop(100); // 垂直滚动到100px
$('html, body').animate({scrollTop: 500}, 300); // 平滑滚动动画监听滚动事件
绑定scroll事件处理器：
$(window).scroll(function() {
if($(this).scrollTop() > 200) {
// 滚动超过200px时执行操作
}
});自定义滚动条插件
推荐使用第三方库实现增强功能：
- perfect-scrollbar：轻量级可定制滚动条
- malihu-custom-scrollbar：支持多种特效
- nicescroll：移动端友好
安装示例（以perfect-scrollbar为例）：
$('#container').perfectScrollbar();禁用滚动
临时禁止页面滚动：
$('body').css('overflow', 'hidden'); // 禁用
$('body').css('overflow', 'auto'); // 恢复滚动到指定元素
使用offset()获取元素位置并滚动：
$('html, body').animate({
scrollTop: $('#target').offset().top
}, 800);注意事项
- 平滑滚动需同时选择
html和body元素以保证跨浏览器兼容 - 移动端需考虑
touch事件兼容性 - 频繁触发的滚动事件建议使用节流(throttle)优化性能
