沒有身體上滾動移動（jQuery Mobile的）

我期待在這裏實施解決方案全屏覆蓋： http://luxiyalu.com/scrolling-on-overlay/沒有身體上滾動移動（jQuery Mobile的）

當我測試了Firefox中的演示（模擬移動），一切似乎工作。

當我試圖實現我的網站（它使用jQuery的手機），滾動下面的身體。

我現在接近它的方法是：

<body> 

<div class="overlay"> 
    <div class="overlay-content"> 
put popup/overlay stuff here 
    </div> 
</div> 

<div class="background-content"> 

<div data-role="page"> 
put normal page stuff here 
</div> 

</div> <!-- background-content--> 
</body>

有一些jQuery Mobile的確實是導致身體滾動？我很驚訝它在演示中完全有效（沒有某種類型的身體固定位置）。但是我只知道一點CSS，所以我很難排除故障。

謝謝！

編輯1： 哇，我可以這麼蠢，現在我知道這是從來沒有把你的大腦關閉，複製粘貼，而不在尋找的東西是個好主意。

筆者的頁面有CSS列爲：

.overlay{ 
     position: fixed; 
     top: 0px; 
     left: 0px; 
     right: 0px; 
     bottom: 0px; 
     background-color: rgba(0, 0, 0, 0.8); 

     .overlay-content { 
      height: 100%; 
      overflow: scroll; 
     } 
    }

括號是混亂的，因此瀏覽器沒有正確訓釋的CSS。請注意，.overlay後面的括號是.overlay-content。

新的問題： 固定在此之後，疊加顯示和滾動，直至撞到覆蓋的底部，然後身體下方拾取滾動。 Terence-Hill的回答實際上解決了我的Android內置瀏覽器問題。它停止了身體滾動。然而，身體滾動問題仍然似乎正在發生1）ios safari 2）使用webview的ios應用程序3）使用webview的android應用程序。

任何線索爲什麼它會在android默認瀏覽器中工作，但不是其他3？

來源

2016-11-11 user3249281

嘗試增加：

body:not(.hide-overlay) { 
    overflow: hidden; 
}

如果你想在iOS上平滑滾動

使用：

.overlay { 
    overflow-y: scroll; /* has to be scroll, not auto */ 
    -webkit-overflow-scrolling: touch; 
}

來源

2016-11-11 21:47:09

沒有身體上滾動移動（jQuery Mobile的）

回答

相關問題