根据鼠标滚动切换标签

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 上时才能使用滚动。

您可以取消与滚动相关的鼠标滚轮和按键事件，但用户将能够使用滚动条进行滚动（更多 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);
    }
});

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

Answer 2

你应该能够做到这一点。每当用户向上或向下滚动时，您都可以使用jQuery scroll event 运行您自己的代码。此外，只要在触发滚动事件时调用e.preventDefault()，就可以防止整个窗口向上或向下滚动。