Mobile（android＆ios）瀏覽器忽略隱藏在body，html和容器上的溢出

我的站點有幾個疊加層（lightboxes），我需要防止它們打開時在頁面下方滾動。所以我使用了一點jQuery將overflow: hidden;添加到body,html,#page。這在桌面瀏覽器上運行良好，但移動瀏覽器似乎不遵守規則。Mobile（android＆ios）瀏覽器忽略隱藏在body，html和容器上的溢出

我的頁面結構是：

<html> 
    ... 
    <body> 
      <div id="page"> 
      ... 
      </div> 
    </body> 
</html>

我的jQuery的只是把類的三個元素被點擊觸發時。 jQuery工作（應用樣式），我沒有得到任何錯誤。

是否有已知的錯誤和/或已知的修復？

來源

2014-10-09 dcp3450

使用大致相同的想法，但設置一類noscroll，而不是直接對元素應用樣式。

.noscroll { overflow: hidden; }

過去可以正常工作，如果我沒有記錯，直到iOS的7

做了一些實驗的，似乎這樣做的伎倆。

.noscroll { overflow: hidden; position: fixed; }

來源

2014-12-04 12:17:34 Matijs

因爲我已經運行到一個臭蟲消除後'。 noscr來自身體的「oll」，部分內容在iOS8上被切斷。在我看來，這是一個瀏覽器錯誤。 – Matijs 2014-12-11 14:23:21

這是我自己的實現。

我遇到問題overflow在offcanvas菜單處於活動狀態時無法正常工作。我克服這個問題的方法是在html,body和#page標籤上應用overflow: hidden和position: fixed兩個標籤，這會在除菜單本身之外的任何其他標籤上強制執行noscroll。

希望它可以幫助別人！

HTML：

<header id="masthead"> 
    <button type="button" class="toggle">Toggle</button> 
</header> 
<nav id="offcanvas-menu"> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li> 
    </ul> 
</nav> 
<div id="page"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque erat vel massa porttitor, ac sagittis velit vehicula. Nunc iaculis sapien justo, ac viverra mi convallis et. Sed ac massa lacinia, varius neque et, varius mi. Integer in ligula vitae arcu mollis mollis ut a tortor. Fusce quis tellus fringilla, venenatis arcu posuere, suscipit libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus hendrerit sodales leo, ac pellentesque odio fermentum nec. Ut feugiat in tortor quis cursus. Praesent porttitor imperdiet orci. Morbi sed ultricies velit. Nulla maximus rhoncus congue.</p> 
    <p>Proin nec pharetra tortor, eu sollicitudin ipsum. Morbi turpis magna, feugiat ornare pretium a, tristique ac urna. Phasellus rutrum sem a turpis tincidunt viverra in eget odio. Mauris a nibh eget lacus volutpat lobortis. Sed convallis posuere nisl, id blandit est posuere a. Duis tempor euismod nunc, ut suscipit ligula feugiat in. Phasellus congue nibh non vulputate consectetur.</p> 
</div>

LESS：

html.offcanvas-active, 
html.offcanvas-active body 
html.offcanvas-active #page { 
    overflow: hidden; 
    position: fixed; 
} 

html.offcanvas-active { 
    #masthead, 
    #page { 
    -webkit-transform: translate(-250px); 
     -moz-transform: translate(-250px); 
     transform: translate(-250px); 
    } 
    #offcanvas-menu { 
    right: 0; 
    } 
} 

body { 
    font-family: Arial, sans-serif; 
} 

#masthead { 
    .toggle { 
    float: right; 
    } 
    &:after { 
     visibility: hidden; 
    display: block; 
     content: ""; 
    clear: both; 
    } 
} 

#masthead, 
#page { 
    position: relative; 
    -webkit-transition: transform 1s ease-in-out; 
    -moz-transition: transform 1s ease-in-out; 
     transition: transform 1s ease-in-out; 
} 

#offcanvas-menu { 
    position: fixed; 
    top: 0; right: -250px; 
    width: 250px; height: 100%; 
    background-color: orange; 
    -webkit-transition: right 1s ease-in-out; 
    -moz-transition: right 1s ease-in-out; 
     transition: right 1s ease-in-out; 

    ul { 
     margin: 0; padding-left: 0; 
    list-style: none; 

    li { 
     a { 
     display: block; 
     padding: 10px 15px; 
     text-decoration: none; 
     color: #fff; 
     } 
    } 
    } 
}

JS/jQuery的：

$(document).ready(function() { 
    $('#masthead').on('click', '.toggle', function() { 
     $('html').toggleClass('offcanvas-active'); 
    }); 
});

來源

2015-04-12 14:26:39 adamj

Mobile（android＆ios）瀏覽器忽略隱藏在body，html和容器上的溢出

回答

相關問題