javascript - 根据鼠标滚动切换选项卡

Question

我想在包含多个选项卡的网页上有一个小部件。当用户滚动页面并且小部件进入查看并且他不断向下滚动时，应该一一激活选项卡(页面不会进一步向下滚动)。显示最后一个选项卡后，页面应恢复正常滚动。使用 JS/jQuery 可以吗？

更新:因为这似乎是一个太宽泛的问题:问题是，我不知道如何使用滚动偏移并防止页面向下滚动，直到我决定它可以恢复其正常行为

更新2我创建了This fiddle ,

$(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 上时激活它，我就在那里。有什么想法吗？

Answer 1

您无法使用 JavaScript 阻止滚动。仅当鼠标悬停在 iframe 和 div 上时，使用带滚动功能的 iframe 和 div 才有效。

您可以取消与滚动相关的鼠标滚轮和按键事件，但是用户将能够使用滚动条进行滚动(更多 here )。

另一种方法是留下一个空白区域并将您的小部件固定在该区域内，就像这样 working example

$(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);
    }
});

然后您可以在页面滚动时更改选项卡。