滚动响应的问题

Question

所以这就是我遇到的问题：

• 它的移动布局，所以最大宽度是480px，我有菜单，有登录，注册，购物车，他们有下拉。它们的高度是动态的，所以我需要从它们获得高度，然后不允许用户在该元素下面滚动。

例如 - .class的高度为900px，我不允许用户在900px以下滚动。因此，当视口或窗口结束时，.class用户无法向下滚动。

以下是我尝试使用scrollTop函数执行此操作的代码。

var limitScroll = false;

$(window).scroll(function() {
    if(limitScroll && $(this).scrollTop() > limitScroll) {
        $(this).scrollTop(limitScroll);
    }

});

// Opening box-container
$('.top-menu li a.links').click(function(event){
    event.preventDefault();
    $('.box-container, .sub-menu').removeClass('opened');
    $(this).next().addClass('opened');

    var c = $(this).next();
    limitScroll = c.outerHeight()-$(window).height()+c.offset().top + 20;

});

以下是移动布局和下拉列表的预览。

Answer 1

更好的方法是将该下拉菜单作为全屏div触发。所以在点击按钮时显示此div：

<div id="login>...</div>

<强>样式

#login{
    height:100%;
    min-height:100%;
    width:100%; 
    position:absolute;
    z-index:999;
}

现在div覆盖整个网站，用户可以使用＆＃34;关闭＆＃34;关闭它。按钮。没有滚动问题;）

修改： 您还可以设置该下拉列表的样式以填充屏幕大小。