移動端彈出層沒法滾動解決辦法

時間 2020-03-17

原文原文鏈接

首先CSS層面，在<html>標籤上增長一個類名，例如fascroll，而後配合以下CSS和JS代碼：html

.,
.body {
    overflow: hidden;
}
.body {
    position: relative;
}fascrollfascrollfascroll

而後，當浮層出現的時候：瀏覽器

$('html').addClass('fascroll');

當浮層隱藏的時候：ide

$('html').removeClass('fascroll');

能夠讓一部分瀏覽器的窗體不能滾動，但不包括Safari等瀏覽器，怎麼辦呢？code

咱們能夠在浮層touchmove的時候，阻止默認事件達到避免滾動的問題，例如：htm

$('aside').on('touchmove', function(event) {
    event.preventDefault();
});

這種處理兼容性強，效果最好，可是有一個問題，就是若是浮層本身也有滾動，那麼這種處理會讓浮層裏面本身的滾動行爲也沒法觸發，所以，咱們的處理要更進一步，以下：事件

相關標籤/搜索

移動端 彈出層 沒法滾動 解決辦法