如何在iOS的Safari上禁用網頁的默認滾動效果？

在iOS的Safari的書籤上，有一項「iPad用戶指南」或「iPad用戶指南」。打開它。你可以看到整個頁面不能滾動。頁面中的部分可以滾動。如何在iOS的Safari上禁用網頁的默認滾動效果？

我需要達到同樣的效果。但我不想使用任何像iScroll這樣的JS插件。

我用JS代碼如下禁用整個頁面的默認滾動：

document.addEventListener('touchmove', function (event) { 
    event.preventDefault(); 
}, false);

然後使用CSS代碼-webkit-overflow-scrolling: touch;，使滾動效果的div元素。

但問題是，如果我用我的JS代碼我的CSS代碼不能正常工作。當用戶觸摸移動時，我的div元素不能滾動。

如何解決此問題？謝謝！

2012-03-21 weilou

與您的代碼的問題是document.addEventListener。如您所述，向整個文檔添加事件偵聽器會使您陷入困境。相反，你應該只將它添加到你不想讓iOS溢出滾動的元素（任何正式的名字？）。

添加-webkit-overflow-scrolling: touch;將使該元素在該元素內具有慣性滾動，但它只能在該元素內的第一次滾動時正常工作。因此，如果您點擊滾動元素的頂部或底部，並且例如再次滾動到頂部，則會移動整個頁面而不是該元素。我不知道這個解決方案能夠正常工作。

最好的解決方案將添加一個事件監聽器到所有與no-scroll類的所有元素。像這（使用jQuery選擇具有簡單的一類元素）：

$('.no-scroll').on('touchmove', function (event) { 
    event.preventDefault(); 
}, false);

你也許可以通過將其放入另一個滾動元件來防止第二滾動距離有任何影響。因此，如果可以的話，而不是在雙滾動上滾動整個頁面，它將滾動父元素。

2012-07-12 11:30:58 jeroen

我來到這裏尋找修復僵硬，半破垂直滾動問題在移動Safari瀏覽器。

添加：

-webkit-overflow-scrolling: touch;

肯定是卓有成效的，但它會打破overflow-x: hidden property如果你有它與上面的順序設置。如果你希望達到相同的效果，你應該可以將這些樣式應用到父分區。

2013-08-28 15:25:36

回答