0

多数のタブを含む Web ページにウィジェットを配置したいと考えています。ユーザーがページをスクロールし、ウィジェットが表示され、下にスクロールし続けると、タブが 1 つずつアクティブになる必要があります (ページがさらに下にスクロールする必要はありません)。最後のタブが表示されると、ページは通常どおりスクロールを再開するはずです。これは JS/jQuery を使用して実行できますか?

更新:これは広すぎる質問のようです:問題は、スクロールオフセットを使用して、通常の動作を再開できると判断するまでページが下にスクロールしないようにする方法がわからないことです

UPDATE 2 私が作成したこのフィドル、

$(document).ready(function(){

    $('#tabbed').mouseover(function(){
        $(this).focus();
    }).scroll(function(){
        console.log("scrolling tabs");
    });

    $(window).scroll(function(evt){
        var scrollPos = $(this).scrollTop()
        console.log(scrollPos); 

        // BULLETPROOF WAY TO DETECT IF THE MOUSE IS OVER THE
        // SCROLLABLE DIV AND GIVE IT FOCUS HERE?
    });
});

長いページと、そのコンテンツの中にスクロール可能な div が含まれています。唯一の問題は、マウスを動かした場合にのみ div がスクロール イベントをキャッチし始めることです。マウスがその上にあるときはいつでも、スクロール div をアクティブにする防弾方法を見つけることができれば、私はそこにいます。何か案は？

4

2 に答える 2

2

JavaScript でスクロールを防止することはできません。スクロールで iframe と div を使用すると、マウスがそれらの上にある場合にのみ機能します。

スクロールに関連するマウス ホイールとキー イベントをキャンセルできますが、ユーザーはスクロールバーを使用してスクロールできます (詳細はこちら)。

別のアプローチは、この作業例のように、空の領域を残して、この領域内にウィジェットを固定することです

$(window).bind('scroll', function()
{
    var scroll = $(window).scrollTop(),
        innerHeight = window.innerHeight || $(window).height(),
        fooScroll = $('#fooScroll'),
        emptyArea = $('#emptyArea'),
        offset = emptyArea.offset(),
        fixedClass = 'fixed';

    if(scroll > offset.top)
    {
        if(scroll < offset.top + emptyArea.height() - fooScroll.height())
        {
            fooScroll.addClass(fixedClass);
            fooScroll.css("top", 0);
        }
        else
        {
            fooScroll.removeClass(fixedClass);
            fooScroll.css("top", emptyArea.height() - fooScroll.height());
        }
    }
    else
    {
        fooScroll.removeClass(fixedClass);
        fooScroll.css("top", 0);
    }
});

その後、ページのスクロール中にタブを変更できます。

于 2013-06-10T14:03:19.927 に答える
1

これができるはずです。jQuery スクロール イベントを使用して、ユーザーが上下にスクロールするたびに独自のコードを実行できます。また、スクロール イベントが発生するたびにe.preventDefault()を呼び出す限り、ウィンドウ全体が上下にスクロールするのを防ぐことができます。

于 2013-06-10T12:02:23.413 に答える