jquery滚动事件
jQuery 滚动事件基础
滚动事件可通过 scroll() 方法监听，适用于窗口或可滚动元素。基本语法如下：
$(window).scroll(function() {
// 触发时的操作
});获取滚动位置
使用 scrollTop() 获取垂直滚动位置，scrollLeft() 获取水平滚动位置：
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
console.log("垂直位置: " + scrollTop);
});滚动到指定位置
通过 animate() 实现平滑滚动到特定位置：
$("html, body").animate({
scrollTop: $("#targetElement").offset().top
}, 800); // 800ms动画时长滚动事件优化
高频触发事件可能导致性能问题，建议使用防抖（debounce）技术：
var timer;
$(window).scroll(function() {
clearTimeout(timer);
timer = setTimeout(function() {
console.log("滚动停止");
}, 250); // 250ms延迟
});检测元素进入视口
结合滚动位置判断元素是否可见：
$(window).scroll(function() {
var elementTop = $("#element").offset().top;
var windowHeight = $(window).height();
var scrollTop = $(window).scrollTop();
if (elementTop < scrollTop + windowHeight) {
$("#element").addClass("visible");
}
});禁用滚动
临时禁止页面滚动：
// 禁用
$("body").css("overflow", "hidden");
// 恢复
$("body").css("overflow", "auto");自定义滚动条
使用插件如 perfect-scrollbar 替代默认滚动条：
$("#container").perfectScrollbar();滚动方向判断
记录上次位置判断滚动方向：
var lastScroll = 0;
$(window).scroll(function() {
var currentScroll = $(this).scrollTop();
if (currentScroll > lastScroll) {
console.log("向下滚动");
} else {
console.log("向上滚动");
}
lastScroll = currentScroll;
});滚动加载更多
实现无限滚动加载内容：
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
loadMoreContent();
}
});注意事项
- 移动端需考虑
touchmove事件 - 滚动性能敏感时建议使用
requestAnimationFrame - 避免在滚动事件中执行复杂DOM操作
