在手機上滾動固定div滿滿的內容

我有一個響應式網站，併爲手機構建了一個類似Facebook的滑塊。所以我做了一個非常簡單的設置，目前工作非常簡潔。我的所有內容都在填充整個身體的.outer_wrapper中。在這種包裝是一個.slider DIV與下面的CSS：在手機上滾動固定div滿滿的內容

.slider { 
    position: fixed; 
    height: 100%; 
    right: 0; 
    top: 0; 
    width: 250px; 
}

當我按下觸發它改變了.outer_wrapper向左和.slider出現。

$('.hamburger-menu').click(function() { 
    $('.outer_wrapper').animate({marginLeft: '-250px', marginRight: '-250px'}, 'slow'); 
});

問題是，.slider有溢出的內容，但在手機上它拒絕滾動。它總是滾動.outer_wrapper的內容。我試過-webkit-overflow-scrolling:touch;和overflow-y: scroll;。

編輯：忘了提及.slider不是.outer_wrapper的孩子。所以我的身體是如下結構：

<body> 
    <div class=".outer_wrapper"> 
    <!-- all the lovely content is here --> 
    </div> 
    <div class="slider"> 
    <!-- some menu items here --> 
    </div> 
</body>

有什麼建議嗎？

來源

2014-11-02 supersize

這是手機用戶界面嗎？ – 2014-11-02 23:22:17

@MatildaYiPan是的！ – supersize 2014-11-03 09:19:57

好吧，大家稍微更新一下。我發現這個問題來自我使用的名字爲Skrollr的插件。當停用它：

overflow-y: scroll;

或

overflow: scroll; 
overflow-x: hidden;

的作品就好了。爲了能讓它更順暢Webkit的設備下面做的真棒工作

-webkit-overflow-scrolling: touch;

給定的情況下，改變了整個問題，這就是爲什麼我會紀念這個作爲回答。

來源

2014-11-04 12:47:52 supersize

我會建議的是，將.slider定位在.outer_wrapper之外。然後通過切換他們的類並使用css轉換對它們進行動畫處理。這樣，當用戶向下滑動頁面時，它們不會相互衝突。

試試這個

.slider { 
    position:fixed; 
    height:100%; 
    width:250px; 
    top:0; 
    left:0; 

    -webkit-transform:translate(-250px,0px); 
    transform:translate(-250px,0px); 

    -webkit-transition:all 0.3s ease-out; 
    transition:all 0.3s ease-out; 
} 

.slider.reveal { 
     -webkit-transform:translate(0px,0px); 
     transform:translate(0px,0px); 
} 


.outer_wrapper { 
    margin:0; 
    width:100%; 
    height:100%; 
    position:relative; 
    -webkit-transform:translate(0px,0px); 
    transform:translate(0px,0px); 

    -webkit-transition:all 0.3s ease-out; 
    transition:all 0.3s ease-out; 
} 


.outer_wrapper.hide { 
     -webkit-transform:translate(250px,0px); 
     transform:translate(250px,0px); 
}

和Jquery的，使用toggleClass功能如下：

$('.hamburger-menu').click(function() { 
     $('.outer_wrapper’).toggleClass(‘hide’); 
     $(‘.slider’).toggleClass(‘reveal’); 
});

希望幫助？

來源

2014-11-03 12:08:27

我真的很感謝你的幫助。不幸的是我應該提到'.slider'不是'.outer_wrapper'的子節點。我基本上做了你的建議，但使用jQuery動畫。 – supersize 2014-11-03 14:51:12

好的，對不起。奇怪的是，這在過去非常穩定。如果在外包裝上添加取消激活滾動，點擊漢堡菜單時會發生什麼情況？即 overflow-y：hidden; 並確保菜單滑塊的z-index大於外層包裝。 – 2014-11-03 15:00:33

包裝上的'overflow-y：hidden;'的好主意。請立即嘗試一下。我有'z-index'，這個問題不是來自這個！ – supersize 2014-11-03 19:29:52

在手機上滾動固定div滿滿的內容

回答

相關問題