我如何编程一个JS按钮，它也可以在点击和滚动时激活转换

How can I program a JS button who activate a transition on click and on scroll too?

本文关键字：也可以 滚动 转换 激活 按钮 编程 何编程 JS 一个      更新时间：2023-09-26

我有一个.js文档，它允许我在不同的页面之间切换到同一个html文档中。我有一个触发按钮，只在点击时激活转换，我也想在滚动时或只在滚动时激活它。我试图在函数中添加一个onscroll参数，但没有成功。我想这是因为我有不同的页面宽度：100%，所以我没有任何滚动条。。。

这是我的HTML结构

<body>
    <button id="iterateEffects" class="btn_bot"></button>    <!--Trigger btn-->
    <div id="pt-main" class="pt-perspective">
        <div class="pt-page pt-page-1">First page code inside</div>
        <div class="pt-page pt-page-2">Second page code inside</div>
        etc...
    </div>
</body>

这是我的按钮功能

$iterate = $( '#iterateEffects' ) //my iterateEffects var
function init() {
    $pages.each( function() {
        var $page = $( this );
        $page.data( 'originalClassList', $page.attr( 'class' ) );
    } );
    $pages.eq( current ).addClass( 'pt-page-current' );
    $( '#dl-menu' ).dlmenu( {
        animationClasses : { in : 'dl-animate-in-2', out : 'dl-animate-out-2' },
        onLinkClick : function( el, ev ) {
            ev.preventDefault();
            nextPage( el.data( 'animation' ) );
        }
    } );
    $iterate.on( 'click', function() {
        animcursor = 3;
        nextPage( animcursor );
    } );  //Activate the function on click
}

你试过这个吗：

   $( document ).on( 'scroll', function() {
        animcursor = 3;
        nextPage( animcursor );
    } );

还要确保您的页面是可滚动的。

相关文章：