如何让jQuery自动滚动函数仅在指定class的Div中生效？

原需求与问题 #

我获取了一段Divi页面的全屏滚动代码，希望实现仅当带有autoscroll类的Div在屏幕可见时，才触发自动滚动切换；其余区域保持正常滚动。但自行尝试的代码未生效，存在逻辑与语法错误。

原参考代码 #

( function( $ ) {
$( document ).on( 'mousewheel DOMMouseScroll', function( event ) {
 if ( ( $( '.et_pb_side_nav' ).length === 0 ) || $( 'html, body' ).is( ':animated' ) ) return;
event.preventDefault();
 var direction = event.originalEvent.wheelDelta || -event.originalEvent.detail;
var $position = $( '.et_pb_side_nav' ).find( '.active' );
var $target;
if( direction < 0 ) {
$target = $( $position ).parent().next();
} else {
$target = $( $position ).parent().prev();
}
if ( $( $target.length ) !== 0 ) {
$( $target ).children( 'a' ).trigger( "click" );
}
} );
 } )( jQuery );

未生效的尝试代码 #

<script>
if ( $("div").hasClass("autoscroll") {
 ( function( $ ) {
 $( document ).on( 'mousewheel DOMMouseScroll', function( event ) {
if ( ( $( '.et_pb_side_nav' ).length === 0 ) || $( 'html, body' ).is( ':animated' ) ) return;
event.preventDefault();
 var direction = event.originalEvent.wheelDelta || -event.originalEvent.detail;
 var $position = $( '.et_pb_side_nav' ).find( '.active' );
var $target;
if( direction < 0 ) {
$target = $( $position ).parent().next();
} else {
 $target = $( $position ).parent().prev();
}
if ( $( $target.length ) !== 0 ) {
$( $target ).children( 'a' ).trigger( "click" );
}
} );
} )( jQuery );
}
</script>

问题分析 #

1. 语法错误：尝试代码中的if ( $("div").hasClass("autoscroll")缺少闭合括号)，导致代码无法正常解析执行。
2. 逻辑错误：提前判断是否存在autoscroll元素就绑定事件，无法实时检测元素是否在视口内可见——即使元素存在但不在屏幕上，事件依然会触发，不符合需求。

修正后的代码 #

(function($) {
    // 判断元素是否在视口内可见的工具函数
    function isElementInViewport(el) {
        var rect = el.getBoundingClientRect();
        return (
            rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.bottom >= 0 &&
            rect.left <= (window.innerWidth || document.documentElement.clientWidth) &&
            rect.right >= 0
        );
    }

    $(document).on('mousewheel DOMMouseScroll', function(event) {
        // 多重条件校验：侧边导航存在、页面无动画、autoscroll元素存在且可见
        var $autoscrollDiv = $('.autoscroll');
        if ($('.et_pb_side_nav').length === 0 || $('html, body').is(':animated') || !$autoscrollDiv.length || !isElementInViewport($autoscrollDiv[0])) {
            return; // 不满足条件则执行默认滚动行为
        }

        event.preventDefault(); // 阻止默认滚动
        var direction = event.originalEvent.wheelDelta || -event.originalEvent.detail;
        var $position = $('.et_pb_side_nav').find('.active');
        var $target;

        if (direction < 0) {
            $target = $position.parent().next();
        } else {
            $target = $position.parent().prev();
        }

        if ($target.length !== 0) {
            $target.children('a').trigger("click");
        }
    });
})(jQuery);

关键改动说明 #

• 新增视口检测函数：isElementInViewport通过元素的位置信息，精准判断其是否处于当前屏幕可见区域。
• 实时条件判断：将autoscroll元素的可见性检查放在滚动事件回调内，每次滚动都实时验证，确保只有元素可见时才触发自动滚动。
• 修复语法问题：补全原代码的语法错误，确保代码正常解析。
• 保留原有逻辑：保留了原代码中侧边导航存在性、页面动画状态的判断，避免功能冲突。

内容的提问来源于stack exchange，提问作者François MALET