javascript - 响应式滚动的问题

Question

所以这是我遇到的问题:

• 它的移动布局最大宽度为 480 像素，我有一个菜单，其中包含登录、注册、购物车以及下拉菜单。它们的高度是动态的，所以我需要从它们那里获取高度，然后不允许用户滚动到该元素下方。

例如 - .class 的高度为 900px，我不允许用户滚动到 900px 以下。因此，当视口(viewport)或窗口到达该 .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 覆盖了整个站点，用户可以使用“关闭”按钮将其关闭。没有滚动问题；)

编辑:您还可以为该下拉菜单的 li 设置样式以填充屏幕大小。