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()，就可以防止整个窗口向上或向下滚动。

根据鼠标滚动切换标签

2 个答案: