javascript - 具有多个滚动部分的 html5 移动网站

Question

我一直在开发一个移动网站，该网站有两个必须滚动的部分。主页内容和导航部分内容。为了用户友好，导航栏使用 jquery animate 在 View 中切换。当页面加载时，两个部分的高度根据方向设置为设备的高度/宽度，这就是它们需要单独滚动的原因。

在我的移动设备(android - 有多个浏览器)上，我可以滚动主页内容，但当我尝试滚动导航部分时，这也会滚动主页内容。为什么是这样？这两个部分设置了溢出设置为滚动。

#page{
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-color:#FFF;
    z-index:2;
overflow:scroll;
-webkit-overflow-scrolling: touch;
    padding-top:50px;
    padding-bottom:50px;
    padding-left:10px;
    padding-right:10px;
}
#nav{
    position:fixed;
    z-index:2;
    width:300px;
    height:300px;
    top:70px; //there is a header and footer overlaying
    left:0px;
    display:none;
    background-color:rgba(51,51,51,1);
    padding-top:20px;
    padding-bottom:30px;
    overflow:scroll;
-webkit-overflow-scrolling: touch;
    box-shadow: 5px 0px 5px #333;
    color:#FFF;
}

是否有我忽略的地方或更好的方法？

Answer 1

首先，您可能希望您的#nav 的位置是相对的，并且在您的#nav 上设置z-index 3 或更高。如果我建立一个移动网站，我想让用户感觉他在使用原生应用。

要更好地控制滚动功能，您可以尝试以下方法。

禁用所有滚动

//create the exception variable.
var Scrollable = '.scrollable';

    //prevent all scrolling.
    $(document).on('touchmove', function(e) {
        e.preventDefault();
    });

    $('body').on('touchstart', Scrollable, function(e) {
        if (e.currentTarget.scrollTop === 0) {
            e.currentTarget.scrollTop = 1;
        } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
            e.currentTarget.scrollTop -= 1;
        }
    });

下面是允许滚动的异常:

    // Stops preventDefault from being called on document if it sees a scrollable div
    $('body').on('touchmove', Scrollable, function(e) {
        e.stopPropagation();
    });

你想要做的是在你想要滚动的每个元素上设置一个名为 scrollable 的类。

这样你就可以很容易地决定你是否想要滚动或不滚动，溢出并不总是像你想象的那样工作。

希望对您有所帮助。