Question

是否可以检测用户是否在页面上的任何位置滚动超过20px？

我的意思是，在单页设计中，当用户滚动超过20px但不仅仅是从文档的顶部滚动时，我需要删除一个类。

每当他打开一个弹出窗口时，一个类被添加到问题弹出窗口，一旦用户滚动，我想删除这个类。

无论页面在何处，都重复此功能。

我目前的代码：

$(window , 'body').on('scroll', function() {
    $('.navbar-collapse').collapse('hide');
    $("#wrapper").removeClass('newsletter-opened');
        $("#newsletter").removeClass('opened');
});

谢谢！

Answer 1

你可以使用jQuery。

根据我的解决方案，如果用户在页面上滚动时会滚动200px，如果他滚动到顶部或底部，最小滚动20px，则会调用您的更改。

class LeadContactViewSet(viewsets.ModelViewSet):
    def get_queryset(self):
        queryset = LeadContact.objects.none()
        user = self.request.user
        if user.has_perm('vinclucms_sales.can_view_full_lead_contact_list'):
            queryset = LeadContact.objects.all()
        elif user.has_perm('cms_sales.can_view_lead_contact'):
            queryset = LeadContact.objects.filter(account_handler=user)
        return queryset

    # rest of the view below
    .....

编辑：

看了你的jsFiddle，我知道你想要什么，只需检查一下：

只需在启用popin时定义滚动，并仅在popin具有类var userScroll = $(document).scrollTop(); $(window).on('scroll', function() { var newScroll = $(document).scrollTop(); if(userScroll - newScroll > 20 || newScroll - userScroll > 20){ $('.navbar-collapse').collapse('hide'); $("#wrapper").removeClass('newsletter-opened'); $("#newsletter").removeClass('opened'); } }时才能创建作业

opened

Answer 2

实际上，Scroll功能将对页面滚动的每个像素生效，这在性能方面太重了。

因此，如果你只是采取newScroll＆amp;和userScroll，结果有时可能是错误的（因为新旧滚动位置会在页面移动时很快更新）

因此，我们可以设置一个时间间隔，每250毫秒检查一次滚动位置（这样既可以提高性能，又可以为用户提供超过20px的滚动时间）：

var didScroll;
var lastScrollTop = 0;
var delta = 20;

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // Return if they scroll less than 20px (delta)
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // Do what you want here
    console.log("lastScrollTop: ",lastScrollTop, " - newScroll: ", st);
    $('.navbar-collapse').collapse('hide');
    $("#wrapper").removeClass('newsletter-opened');
    $("#newsletter").removeClass('opened');     

    lastScrollTop = st;
}

以下编辑版本：

（根据你的小提琴，我删除＆＃34;使用严格＆＃34;并注释掉$（＆＃39; .navbar-collapse＆＃39;）＆amp; $（＆＃39; #wrapper＆＃39; ;））

你是否介意再试一次（似乎以前的一些错误只是阻止我的代码执行）

$(document).ready(function(){

    $("a.open-newsletter").on( "click", function() {
            $("#newsletter").toggleClass('opened');
            return false;
    });

    var didScroll;
    var lastScrollTop = 0;
    var delta = 20;
    $(window).scroll(function(event){
        didScroll = true;
    });

    setInterval(function() {
        if (didScroll) {
            hasScrolled();
            didScroll = false;
        }
    }, 250);

    function hasScrolled() {
        var st = $(this).scrollTop();

        // Return if they scroll less than 20px (delta)
        if(Math.abs(lastScrollTop - st) <= delta)
            return;

        // Do what you want here
        console.log("lastScrollTop: ",lastScrollTop, " - newScroll: ", st);
        //$('.navbar-collapse').collapse('hide');
        //$("#wrapper").removeClass('newsletter-opened');
        $("#newsletter").removeClass('opened');     

        lastScrollTop = st;
    }

});

检测用户是否滚动超过20像素，无论页面上的位置

2 个答案: