Question

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

在我的移动设备上（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的类。

通过这种方式，您可以轻松决定是否需要可滚动的内容，溢出并不总是按照您的想法运行。

我希望这会有所帮助。

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

1 个答案: