blocks|key|3120494|text|理论|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3120495|查看pinterest站点的当前实现(将来可能会更改)，当您打开覆盖时，noscroll类将应用于body元素并设置overflow:+hidden，因此body不再可滚动。|CODE|3120496|覆盖图(动态创建或已在页面中创建并通过display:+block可见，没有区别)具有position+:+fixed和overflow-y:+scroll，并将top、left、right和bottom属性设置为0：此样式使覆盖图填充整个视口。|3120497|覆盖图中的div只是在position:+static中，那么您看到的垂直滚动条就是与该元素相关的。因此，内容是可滚动的，但覆盖仍然是固定的。|3120498|当你关闭缩放时，你隐藏了覆盖图(通过display:+none)，然后你也可以通过javascript将其完全移除(或者仅仅是里面的内容，如何注入它取决于你)。|3120499|作为最后一步，您还必须删除body的noscroll类(以便overflow属性返回其初始值)|3120500|3120501|代码|3120502|3120503|+Codepen+Example|blockquote|3120504|3120505|3120506|(它的工作原理是更改覆盖图的aria-hidden属性，以便显示和隐藏覆盖图并提高其可访问性)。|3120507|标记|3120508|(打开按钮)|3120509|<button+type="button"+class="open-overlay">OPEN+LAYER</button>|code-block|syntax|javascript|3120510|(覆盖和关闭按钮)|3120511|<section+class="overlay"+aria-hidden="true">
++<div>
++++<h2>Hello,+I'm+the+overlayer</h2>
++++...+++
++++<button+type="button"+class="close-overlay">CLOSE+LAYER</button>
++</div>
</section>|3120512|CSS|3120513|.noscroll+{+
++overflow:+hidden;
}

.overlay+{+
+++position:+fixed;+
+++overflow-y:+scroll;
+++top:+0;+right:+0;+bottom:+0;+left:+0;+}

[aria-hidden="true"]++{+display:+none;+}
[aria-hidden="false"]+{+display:+block;+}|3120514|Javascript+(vanilla-JS)|3120515|var+body+=+document.body,
++++overlay+=+document.querySelector('.overlay'),
++++overlayBtts+=+document.querySelectorAll('button[class$="overlay"]');

[].forEach.call(overlayBtts,+function(btt)+{

++btt.addEventListener('click',+function()+{+

+++++/*+Detect+the+button+class+name+*/
+++++var+overlayOpen+=+this.className+===+'open-overlay';

+++++/*+Toggle+the+aria-hidden+state+on+the+overlay+and+the+
++++++++no-scroll+class+on+the+body+*/
+++++overlay.setAttribute('aria-hidden',+!overlayOpen);
+++++body.classList.toggle('noscroll',+overlayOpen);

+++++/*+On+some+mobile+browser+when+the+overlay+was+previously
++++++++opened+and+scrolled,+if+you+open+it+again+it+doesn't+
++++++++reset+its+scrollTop+property+*/
+++++overlay.scrollTop+=+0;

++},+false);

});|3120516|3120517|最后，这里是另一个例子，在这个例子中，通过应用于opacity属性的CSS+transition，覆盖以淡入效果打开。此外，还应用了padding-right，以避免在滚动条消失时在基础文本上重排。|3120518|3120519|+Codepen+Example+(fade)|3120520|3120521|3120522|3120523|.noscroll+{+overflow:+hidden;+}

@media+(min-device-width:+1025px)+{
++++/*+not+strictly+necessary,+just+an+experiment+for+
+++++++this+specific+example+and+couldn't+be+necessary+
+++++++at+all+on+some+browser+*/
++++.noscroll+{+
++++++++padding-right:+15px;
++++}
}

.overlay+{+
+++++position:+fixed;+
+++++overflow-y:+scroll;
+++++top:+0;+left:+0;+right:+0;+bottom:+0;
}

[aria-hidden="true"]+{++++
++++transition:+opacity+1s,+z-index+0s+1s;
++++width:+100vw;
++++z-index:+-1;+
++++opacity:+0;++
}

[aria-hidden="false"]+{++
++++transition:+opacity+1s;
++++width:+100%25;
++++z-index:+1;++
++++opacity:+1;+
}|3120524|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/anon/pen/xZBovY?editors=0110|1|http://codepen.io/anon/pen/ZWWgZJ?editors=0110^0|0|2|0|10|8|1D|4|1M|G|25|4|0|J|E|17|G|1O|I|29|3|2D|4|2I|5|2O|6|2Z|1|0|5|3|B|G|0|I|D|0|D|4|I|8|0|0|0|2|0|0|1|F|0|0|0|0|E|B|0|0|2|0|0|0|0|0|0|3|0|0|0|A|0|0|0|O|7|12|A|1U|D|0|0|1|M|1|0|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|27|8|@$9|28|A|29|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|2A|8|@$9|2B|A|2C|B|H]|$9|2D|A|2E|B|H]|$9|2F|A|2G|B|H]|$9|2H|A|2I|B|H]]|D|@]|E|$]]|$1|I|3|J|5|6|7|2J|8|@$9|2K|A|2L|B|H]|$9|2M|A|2N|B|H]|$9|2O|A|2P|B|H]|$9|2Q|A|2R|B|H]|$9|2S|A|2T|B|H]|$9|2U|A|2V|B|H]|$9|2W|A|2X|B|H]|$9|2Y|A|2Z|B|H]]|D|@]|E|$]]|$1|K|3|L|5|6|7|30|8|@$9|31|A|32|B|H]|$9|33|A|34|B|H]]|D|@]|E|$]]|$1|M|3|N|5|6|7|35|8|@$9|36|A|37|B|H]]|D|@]|E|$]]|$1|O|3|P|5|6|7|38|8|@$9|39|A|3A|B|H]|$9|3B|A|3C|B|H]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|3D|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|3E|8|@$9|3F|A|3G|B|C]]|D|@]|E|$]]|$1|T|3|-4|5|6|7|3H|8|@]|D|@]|E|$]]|$1|U|3|V|5|W|7|3I|8|@]|D|@$9|3J|A|3K|1|3L]]|E|$]]|$1|X|3|-4|5|6|7|3M|8|@]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|3N|8|@]|D|@]|E|$]]|$1|Z|3|10|5|6|7|3O|8|@$9|3P|A|3Q|B|H]]|D|@]|E|$]]|$1|11|3|12|5|6|7|3R|8|@$9|3S|A|3T|B|C]]|D|@]|E|$]]|$1|13|3|14|5|6|7|3U|8|@]|D|@]|E|$]]|$1|15|3|16|5|17|7|3V|8|@]|D|@]|E|$18|19]]|$1|1A|3|1B|5|6|7|3W|8|@]|D|@]|E|$]]|$1|1C|3|1D|5|17|7|3X|8|@]|D|@]|E|$18|19]]|$1|1E|3|1F|5|6|7|3Y|8|@$9|3Z|A|40|B|C]]|D|@]|E|$]]|$1|1G|3|1H|5|17|7|41|8|@]|D|@]|E|$18|19]]|$1|1I|3|1J|5|6|7|42|8|@$9|43|A|44|B|C]]|D|@]|E|$]]|$1|1K|3|1L|5|17|7|45|8|@]|D|@]|E|$18|19]]|$1|1M|3|-4|5|6|7|46|8|@]|D|@]|E|$]]|$1|1N|3|1O|5|6|7|47|8|@$9|48|A|49|B|H]|$9|4A|A|4B|B|H]|$9|4C|A|4D|B|H]]|D|@]|E|$]]|$1|1P|3|-4|5|6|7|4E|8|@]|D|@]|E|$]]|$1|1Q|3|1R|5|W|7|4F|8|@]|D|@$9|4G|A|4H|1|4I]]|E|$]]|$1|1S|3|-4|5|6|7|4J|8|@]|D|@]|E|$]]|$1|1T|3|-4|5|6|7|4K|8|@]|D|@]|E|$]]|$1|1U|3|1F|5|6|7|4L|8|@$9|4M|A|4N|B|C]]|D|@]|E|$]]|$1|1V|3|1W|5|17|7|4O|8|@]|D|@]|E|$18|19]]|$1|1X|3|-4|5|6|7|4P|8|@]|D|@]|E|$]]]|1Y|$1Z|$5|20|21|22|E|$23|24]]|25|$5|20|21|22|E|$23|26]]]]

<p><strong>Theory</strong></p>

<p>Looking at current implementation of the pinterest site (it might change in the future), when you open the overlay a <code>noscroll</code> class is applied to the <code>body</code> element and <code>overflow: hidden</code> is set, thus <code>body</code> is no longer scrollable.</p>

<p>The overlay (created on-the-fly or already inside the page and made visible via <code>display: block</code>, it makes no difference) has <code>position : fixed</code> and <code>overflow-y: scroll</code>, with <code>top</code>, <code>left</code>, <code>right</code> and <code>bottom</code> properties set to <code>0</code>: this style makes the overlay fill the whole viewport. </p>

<p>The <code>div</code> inside the overlay is instead just in <code>position: static</code> then the vertical scrollbar you see is related to that element. As a result the content is scrollable but overlay remains fixed.</p>

<p>When you close the zoom you hide the overlay (via <code>display: none</code>) and then you could also entirely remove it via javascript (or just the content inside, it's up to you how to inject it).</p>

<p>As a final step you have to also remove the <code>noscroll</code> class to the <code>body</code> (so the overflow property returns to its initial value)</p>

<hr>

<p><strong>Code</strong></p>

<blockquote>
  <p><a href="http://codepen.io/anon/pen/xZBovY?editors=0110" rel="noreferrer">Codepen Example</a>  </p>
</blockquote>

<p>(it works by changing the <code>aria-hidden</code> attribute of the overlay in order to show and hide it and to increase its accessibility).</p>

<p><strong>Markup</strong><br>
<em>(open button)</em></p>

<pre><code>&lt;button type="button" class="open-overlay"&gt;OPEN LAYER&lt;/button&gt;
</code></pre>

<p><em>(overlay and close button)</em></p>

<pre><code>&lt;section class="overlay" aria-hidden="true"&gt;
  &lt;div&gt;
    &lt;h2&gt;Hello, I'm the overlayer&lt;/h2&gt;
    ...   
    &lt;button type="button" class="close-overlay"&gt;CLOSE LAYER&lt;/button&gt;
  &lt;/div&gt;
&lt;/section&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.noscroll { 
  overflow: hidden;
}

.overlay { 
   position: fixed; 
   overflow-y: scroll;
   top: 0; right: 0; bottom: 0; left: 0; }

[aria-hidden="true"]  { display: none; }
[aria-hidden="false"] { display: block; }
</code></pre>

<p><strong>Javascript</strong> <em>(vanilla-JS)</em></p>

<pre><code>var body = document.body,
    overlay = document.querySelector('.overlay'),
    overlayBtts = document.querySelectorAll('button[class$="overlay"]');

[].forEach.call(overlayBtts, function(btt) {

  btt.addEventListener('click', function() { 

     /* Detect the button class name */
     var overlayOpen = this.className === 'open-overlay';

     /* Toggle the aria-hidden state on the overlay and the 
        no-scroll class on the body */
     overlay.setAttribute('aria-hidden', !overlayOpen);
     body.classList.toggle('noscroll', overlayOpen);

     /* On some mobile browser when the overlay was previously
        opened and scrolled, if you open it again it doesn't 
        reset its scrollTop property */
     overlay.scrollTop = 0;

  }, false);

});
</code></pre>

<hr>

<p>Finally, here's another example in which the overlay opens with a fade-in effect by a CSS <code>transition</code> applied to the <code>opacity</code> property. Also a <code>padding-right</code> is applied to avoid a reflow on the underlying text when the scrollbar disappears.</p>

<blockquote>
  <p><a href="http://codepen.io/anon/pen/ZWWgZJ?editors=0110" rel="noreferrer">Codepen Example (fade)</a>  </p>
</blockquote>

<p><strong>CSS</strong></p>

<pre><code>.noscroll { overflow: hidden; }

@media (min-device-width: 1025px) {
    /* not strictly necessary, just an experiment for 
       this specific example and couldn't be necessary 
       at all on some browser */
    .noscroll { 
        padding-right: 15px;
    }
}

.overlay { 
     position: fixed; 
     overflow-y: scroll;
     top: 0; left: 0; right: 0; bottom: 0;
}

[aria-hidden="true"] {    
    transition: opacity 1s, z-index 0s 1s;
    width: 100vw;
    z-index: -1; 
    opacity: 0;  
}

[aria-hidden="false"] {  
    transition: opacity 1s;
    width: 100%;
    z-index: 1;  
    opacity: 1; 
}
</code></pre>


blocks|key|241579|text|如果你想在ios上防止过卷，你可以在你的.noscroll类中添加position+fixed|type|unstyled|depth|inlineStyleRanges|entityRanges|data|241580|body.noscroll{
++++position:fixed;
++++overflow:hidden;
}|code-block|syntax|javascript|241581|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you want to prevent overscrolling on ios, you can add position fixed to your .noscroll class</p>

<pre><code>body.noscroll{
    position:fixed;
    overflow:hidden;
}
</code></pre>


blocks|key|2906327|text|一般而言，如果您希望父对象(本例中为body+)在子对象(本例中为overlay+)滚动时阻止其滚动，则应使子对象成为父对象的同级，以防止scroll事件向上扩展到父对象。如果父元素是正文，则需要额外的包装元素：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2906328|<div+id="content">
</div>
<div+id="overlay">
</div>|code-block|syntax|javascript|2906329|请参阅Scroll+particular+DIV+contents+with+browser's+main+scrollbar以了解其工作情况。|offset|length|2906330|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/q/6887112/757830^0|0|0|3|1O|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Generally speaking, if you want a parent (the body in this case) to prevent it from scrolling when a child (the overlay in this case) scrolls, then make the child a sibling of the parent to prevent the scroll event from bubbling up to the parent. In case of the parent being the body, this requires an additional wrapping element:</p>

<pre><code>&lt;div id="content"&gt;
&lt;/div&gt;
&lt;div id="overlay"&gt;
&lt;/div&gt;
</code></pre>

<p>See <a href="https://stackoverflow.com/q/6887112/757830">Scroll particular DIV contents with browser's main scrollbar</a> to see its working.</p>


blocks|key|236380|text|值得注意的是，有时将"overflow:hidden“添加到body标记并不起作用。在这些情况下，您还必须将该属性添加到html标记。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|236381|html,+body+{
++++overflow:+hidden;
}|code-block|syntax|javascript|236382|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>It is worth noting that sometimes adding "overflow:hidden" to the body tag doesn't do the job. In those cases, you'll have to add the property to the html tag as well.</p>

<pre><code>html, body {
    overflow: hidden;
}
</code></pre>


blocks|key|2906366|text|我想补充之前的答案，因为我尝试过这样做，但当我将body切换到position:fixed时，一些布局就被破坏了。为了避免这种情况，我还必须将body的高度设置为100%25：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2906367|function+onMouseOverOverlay(over){
++++document.getElementsByTagName("body")[0].style.overflowY+=+(over?"hidden":"scroll");
++++document.getElementsByTagName("html")[0].style.position+=+(over?"fixed":"static");
++++document.getElementsByTagName("html")[0].style.height+=+(over?"100%25":"auto");
}|code-block|syntax|javascript|2906368|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I'd like to add to previous answers because I tried to do that, and some layout broke as soon as I switched the body to position:fixed. In order to avoid that, I had to also set body's height to 100% :</p>

<pre><code>function onMouseOverOverlay(over){
    document.getElementsByTagName("body")[0].style.overflowY = (over?"hidden":"scroll");
    document.getElementsByTagName("html")[0].style.position = (over?"fixed":"static");
    document.getElementsByTagName("html")[0].style.height = (over?"100%":"auto");
}
</code></pre>


blocks|key|3120692|text|不要在body上使用overflow:+hidden;。它会自动将所有内容滚动到顶部。也不需要JavaScript。使用overflow:+auto;。这个解决方案甚至可以与移动Safari一起使用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3120693|HTML结构|3120694|<div+class="overlay">
++++<div+class="overlay-content"></div>
</div>

<div+class="background-content">
++++lengthy+content+here
</div>|code-block|syntax|javascript|3120695|样式设置|3120696|.overlay{
++++position:+fixed;
++++top:+0px;
++++left:+0px;
++++right:+0px;
++++bottom:+0px;
++++background-color:+rgba(0,+0,+0,+0.8);

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

.background-content{
++++height:+100%25;
++++overflow:+auto;
}|3120697|请参阅演示here和源代码here。|3120698|更新：|BOLD|3120699|对于想要键盘空格键的人，向上/向下翻页工作:在div的这一部分响应键盘之前，您需要专注于覆盖，例如，单击它，或手动JS专注于它。当覆盖被“关闭”时也是如此，因为它只是将覆盖移到一边。否则对于浏览器来说，这只是两个普通的div，它不知道为什么要关注其中的任何一个。|3120700|entityMap|0|LINK|mutability|MUTABLE|url|http://luxiyalu.com/playground/overlay/|1|https://github.com/Luxiyalu/scrollable-overlay^0|3|4|A|H|1O|F|0|0|0|0|0|5|4|0|D|4|1|0|0|3|0|N|3|31|3|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1E|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1F|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1G|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1H|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1I|8|@]|D|@$9|1J|A|1K|1|1L]|$9|1M|A|1N|1|1O]]|E|$]]|$1|S|3|T|5|6|7|1P|8|@$9|1Q|A|1R|B|U]]|D|@]|E|$]]|$1|V|3|W|5|6|7|1S|8|@$9|1T|A|1U|B|C]|$9|1V|A|1W|B|C]]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1X|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14]]|15|$5|10|11|12|E|$13|16]]]]

<p>Don't use <code>overflow: hidden;</code> on <code>body</code>. It automatically scrolls everything to the top. There's no need for JavaScript either. Make use of <code>overflow: auto;</code>. This solution even works with mobile Safari:</p>

<h1>HTML Structure</h1>

<pre><code>&lt;div class="overlay"&gt;
    &lt;div class="overlay-content"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div class="background-content"&gt;
    lengthy content here
&lt;/div&gt;
</code></pre>

<h1>Styling</h1>

<pre><code>.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;
    }
}

.background-content{
    height: 100%;
    overflow: auto;
}
</code></pre>

<p>See the demo <a href="http://luxiyalu.com/playground/overlay/" rel="noreferrer">here</a> and source code <a href="https://github.com/Luxiyalu/scrollable-overlay" rel="noreferrer">here</a>.</p>

<p><strong>Update:</strong></p>

<p>For people who want keyboard space bar, page up/down to work: you need to focus on the overlay, e.g., clicking on it, or manually JS focusing on it before this part of the <code>div</code> will respond to keyboard. Same with when the overlay is "switched off", since it's just moving the overlay to the side. Otherwise to browser, these are just two normal <code>div</code>s and it wouldn't know why it should focus on any one of them.</p>


blocks|key|2906417|text|使用以下HTML：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2906418|<body>
++<div+class="page">Page+content+here</div>
++<div+class="overlay"></div>
</body>|code-block|syntax|javascript|2906419|然后JavaScript截取并停止滚动：|2906420|$(".page").on("touchmove",+function(event)+{
++event.preventDefault()
});|2906421|然后让事情恢复正常：|2906422|$(".page").off("touchmove");|offset|length|style|CODE|2906423|entityMap^0|0|0|0|0|0|0|S|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@$O|10|P|11|Q|R]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>Use the following HTML:</p>

<pre><code>&lt;body&gt;
  &lt;div class="page"&gt;Page content here&lt;/div&gt;
  &lt;div class="overlay"&gt;&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>Then JavaScript to intercept and stop scrolling:</p>

<pre><code>$(".page").on("touchmove", function(event) {
  event.preventDefault()
});
</code></pre>

<p>Then to get things back to normal:</p>

<p><code>$(".page").off("touchmove");</code></p>


blocks|key|2906450|text|我发现这个问题是为了解决我在Ipad和Iphone上的页面问题-当我将固定的div显示为带有图像的弹出窗口时，body正在滚动。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2906451|有些答案很好，但是没有一个解决了我的问题。我找到了克里斯托弗·彼得森的一篇博文。这里提出的解决方案解决了我在iOS设备上遇到的问题，也解决了我的滚动背景问题。|2906452|Six+things+I+learnt+about+iOS+Safari's+rubber+band+scrolling|offset|length|2906453|正如有人建议的那样，我在博客帖子中包含了一些要点，以防链接过时。|2906454|为了禁止用户在“菜单打开”时滚动背景页面，可以通过应用一些JavaScript和CSS类来控制哪些元素应该允许滚动或不允许滚动。|2906455|基于此Stackoverflow回答，您可以控制在触发touchmove事件时，具有禁用滚动的元素不应执行默认滚动操作。“|2906456|+document.ontouchmove+=+function+(+event+)+{

++++var+isTouchMoveAllowed+=+true,+target+=+event.target;

++++while+(+target+!==+null+)+{
++++++++if+(+target.classList+&&+target.classList.contains(+'disable-scrolling'+)+)+{
++++++++++++isTouchMoveAllowed+=+false;
++++++++++++break;
++++++++}
++++++++target+=+target.parentNode;
++++}

++++if+(+!isTouchMoveAllowed+)+{
++++++++event.preventDefault();
++++}
};|code-block|syntax|javascript|2906457|然后将禁用滚动类放在页面div上：|2906458|<div+class="page+disable-scrolling">|2906459|entityMap|0|LINK|mutability|MUTABLE|url|https://blog.christoffer.online/2015-06-10-six-things-i-learnt-about-ios-rubberband-overflow-scrolling/|1|https://stackoverflow.com/questions/19909533/disable-rubber-band-in-ios-full-screen-web-app^0|0|0|0|1O|0|0|0|0|3|D|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@$F|19|G|1A|1|1B]]|A|$]]|$1|H|3|I|5|6|7|1C|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1D|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1E|8|@]|9|@$F|1F|G|1G|1|1H]]|A|$]]|$1|N|3|O|5|P|7|1I|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|1J|8|@]|9|@]|A|$]]|$1|U|3|V|5|P|7|1K|8|@]|9|@]|A|$Q|R]]|$1|W|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]|14|$5|Z|10|11|A|$12|15]]]]

<p>I found this question trying to solve issue I had with my page on Ipad and Iphone - body was scrolling when I was displaying fixed div as popup with image.</p>

<p>Some answers are good, however none of them solved my issue. I found following blog post by Christoffer Pettersson. Solution presented there helped issue I had with iOS devices and it helped my scrolling background problem. </p>

<p><a href="https://blog.christoffer.online/2015-06-10-six-things-i-learnt-about-ios-rubberband-overflow-scrolling/" rel="nofollow noreferrer">Six things I learnt about iOS Safari's rubber band scrolling</a></p>

<p>As it was suggested I include major points of the blog post in case link gets outdated. </p>

<p>"In order to disable that the user can scroll the background page while the "menu is open", it is possible to control what elements should be allowed to be scrolled or not, by applying some JavaScript and a CSS class.</p>

<p>Based on this <a href="https://stackoverflow.com/questions/19909533/disable-rubber-band-in-ios-full-screen-web-app">Stackoverflow</a> answer you can control that elements with the disable-scrolling should not 
perform their default scroll action when the touchmove event is triggered."</p>

<pre><code> document.ontouchmove = function ( event ) {

    var isTouchMoveAllowed = true, target = event.target;

    while ( target !== null ) {
        if ( target.classList &amp;&amp; target.classList.contains( 'disable-scrolling' ) ) {
            isTouchMoveAllowed = false;
            break;
        }
        target = target.parentNode;
    }

    if ( !isTouchMoveAllowed ) {
        event.preventDefault();
    }
};
</code></pre>

<p>And then put the disable-scrolling class on the page div:</p>

<pre><code>&lt;div class="page disable-scrolling"&gt;
</code></pre>


blocks|key|3120767|text|对于触摸设备，尝试在覆盖的包装器中添加一个1px宽、101vh最小高度的透明div。然后将-webkit-overflow-scrolling:touch;+overflow-y:+auto;添加到包装器中。这使移动safari认为覆盖是可滚动的，从而截获来自身体的触摸事件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3120768|这是一个示例页面。在移动safari上打开：http://www.originalfunction.com/overlay.html|3120769|https://gist.github.com/YarGnawh/90e0647f21b5fa78d2f678909673507f|3120770|entityMap|0|LINK|mutability|MUTABLE|url|http://www.originalfunction.com/overlay.html|1^0|Q|5|19|1F|0|M|18|0|0|0|1T|1|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|H|3|I|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|J|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|I]]]]

<p>For touch devices, try adding a 1px wide, <code>101vh</code> min-height transparent div in the wrapper of the overlay. Then add <code>-webkit-overflow-scrolling:touch; overflow-y: auto;</code> to the wrapper. This tricks mobile safari into thinking the overlay is scrollable, thus intercepting the touch event from the body.</p>

<p>Here's a sample page. Open on mobile safari: <a href="http://www.originalfunction.com/overlay.html" rel="nofollow">http://www.originalfunction.com/overlay.html</a></p>

<p><a href="https://gist.github.com/YarGnawh/90e0647f21b5fa78d2f678909673507f" rel="nofollow">https://gist.github.com/YarGnawh/90e0647f21b5fa78d2f678909673507f</a></p>


blocks|key|236459|text|使用下面的代码禁用和启用滚动条。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|236460|Scroll+=+(
++++function(){
++++++++++var+x,y;
+++++++++function+hndlr(){
++++++++++++window.scrollTo(x,y);
++++++++++++//return;
++++++++++}++
++++++++++return+{

+++++++++++++++disable+:+function(x1,y1){
++++++++++++++++++++x+=+x1;
++++++++++++++++++++y+=+y1;
+++++++++++++++++++if(window.addEventListener){
+++++++++++++++++++++++window.addEventListener("scroll",hndlr);
+++++++++++++++++++}+
+++++++++++++++++++else{
++++++++++++++++++++++++window.attachEvent("onscroll",+hndlr);
+++++++++++++++++++}+++++

+++++++++++++++},
+++++++++++++++enable:+function(){
++++++++++++++++++++++if(window.removeEventListener){
+++++++++++++++++++++++++window.removeEventListener("scroll",hndlr);
++++++++++++++++++++++}
++++++++++++++++++++++else{
++++++++++++++++++++++++window.detachEvent("onscroll",+hndlr);
++++++++++++++++++++++}
+++++++++++++++}+

++++++++++}
++++})();
+//for+disabled+scroll+bar.
Scroll.disable(0,document.body.scrollTop);
//for+enabled+scroll+bar.
Scroll.enable();|code-block|syntax|javascript|236461|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Use below code for disabling and enabling scroll bar.</p>

<pre><code>Scroll = (
    function(){
          var x,y;
         function hndlr(){
            window.scrollTo(x,y);
            //return;
          }  
          return {

               disable : function(x1,y1){
                    x = x1;
                    y = y1;
                   if(window.addEventListener){
                       window.addEventListener("scroll",hndlr);
                   } 
                   else{
                        window.attachEvent("onscroll", hndlr);
                   }     

               },
               enable: function(){
                      if(window.removeEventListener){
                         window.removeEventListener("scroll",hndlr);
                      }
                      else{
                        window.detachEvent("onscroll", hndlr);
                      }
               } 

          }
    })();
 //for disabled scroll bar.
Scroll.disable(0,document.body.scrollTop);
//for enabled scroll bar.
Scroll.enable();
</code></pre>


blocks|key|2906586|text|选择的答案是正确的，但有一些限制：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2906587|用手指用力“弹”|2906588|仍会在<body>|unordered-list-item|offset|length|style|CODE|2906589|中滚动<input>在模式中点击<input>的虚拟键盘会将所有未来的滚动转到with|2906590|我没有解决第一个问题的方法，但我想解释一下第二个问题。令人困惑的是，Bootstrap曾经记录了键盘问题，但他们声称这个问题已经修复，并引用http://output.jsbin.com/cacido/quiet作为修复的一个例子。|2906591|实际上，在我的测试中，这个例子在iOS上运行得很好。但是，将其升级到最新的引导程序(v4)会破坏它。|2906592|为了找出它们之间的区别，我减少了一个测试用例，使其不再依赖于Bootstrap，http://codepen.io/WestonThayer/pen/bgZxBG。|2906593|决定因素是奇怪的。为了避免键盘问题，似乎需要在包含模式的根<div>上设置，并且必须将模式的内容嵌套在另一个<div>中，该<div>可以设置background-color。|BOLD|2906594|要对其进行测试，请取消注释Codepen示例中的以下行：|2906595|.modal+{
++position:+fixed;
++top:+0;
++right:+0;
++bottom:+0;
++left:+0;
++z-index:+2;
++display:+none;
++overflow:+hidden;
++-webkit-overflow-scrolling:+touch;
++/*+UNCOMMENT+TO+BREAK+*/
/*+++background-color:+white;+*/
}|code-block|syntax|javascript|2906596|entityMap|0|LINK|mutability|MUTABLE|url|http://output.jsbin.com/cacido/quiet|1|http://codepen.io/WestonThayer/pen/bgZxBG^0|0|0|3|6|0|3|7|G|7|0|1Y|10|0|0|0|14|15|1|0|R|1P|T|5|1I|5|1Q|5|1Z|G|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1D|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1E|8|@$G|1F|H|1G|I|J]]|9|@]|A|$]]|$1|K|3|L|5|6|7|1H|8|@$G|1I|H|1J|I|J]|$G|1K|H|1L|I|J]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1M|8|@]|9|@$G|1N|H|1O|1|1P]]|A|$]]|$1|O|3|P|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1R|8|@]|9|@$G|1S|H|1T|1|1U]]|A|$]]|$1|S|3|T|5|6|7|1V|8|@$G|1W|H|1X|I|U]|$G|1Y|H|1Z|I|J]|$G|20|H|21|I|J]|$G|22|H|23|I|J]|$G|24|H|25|I|J]]|9|@]|A|$]]|$1|V|3|W|5|6|7|26|8|@$G|27|H|28|I|U]]|9|@]|A|$]]|$1|X|3|Y|5|Z|7|29|8|@]|9|@]|A|$10|11]]|$1|12|3|-4|5|6|7|2A|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|19]]|1A|$5|15|16|17|A|$18|1B]]]]

<p>The chosen answer is correct, but has some limitations:</p>

<ul>
<li>Super hard "flings" with your finger will still scroll <code>&lt;body&gt;</code> in the background</li>
<li>Opening the virtual keyboard by tapping an <code>&lt;input&gt;</code> in the modal will direct all future scrolls to <code>&lt;body&gt;</code></li>
</ul>

<p>I don't have a fix for the first issue, but wanted to shed some light on the second. Confusingly, Bootstrap used to have the keyboard issue documented, but they claimed it was fixed, citing <a href="http://output.jsbin.com/cacido/quiet" rel="noreferrer">http://output.jsbin.com/cacido/quiet</a> as an example of the fix.</p>

<p>Indeed, that example works fine on iOS with my tests. However, upgrading it to the latest Bootstrap (v4) breaks it.</p>

<p>In an attempt to figure out what the difference between them was, I reduced a test case to no longer depend on Bootstrap, <a href="http://codepen.io/WestonThayer/pen/bgZxBG" rel="noreferrer">http://codepen.io/WestonThayer/pen/bgZxBG</a>.</p>

<p>The deciding factors are bizarre. Avoiding the keyboard issue seems to require that <code>background-color</code> <strong>is not</strong> set on the root <code>&lt;div&gt;</code> containing the modal <strong>and</strong> the modal's content must be nested in another <code>&lt;div&gt;</code>, which can have <code>background-color</code> set.</p>

<p>To test it, uncomment the below line in the Codepen example:</p>

<pre><code>.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  /* UNCOMMENT TO BREAK */
/*   background-color: white; */
}
</code></pre>


blocks|key|2906640|text|如果要在移动/触控设备上禁用，那么最直接的方法就是使用touch-action:+none;。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2906641|示例：|2906642|​|2906643|const+app+=+document.getElementById('app');
const+overlay+=+document.getElementById('overlay');

let+body+=+'';

for+(let+index+=+0;+index+<+500;+index%2B%2B)+{
++body+%2B=+index+%2B+'<br+/>';
}

app.innerHTML+=+body;
app.scrollTop+=+200;

overlay.innerHTML+=+body;|code-block|syntax|javascript|2906644|*+{
++margin:+0;
++padding:+0;
}

html,
body+{
++height:+100%25;
}

#app+{
++background:+#f00;
++position:+absolute;
++height:+100%25;
++width:+100%25;
++overflow-y:+scroll;
++line-height:+20px;
}

#overlay+{
++background:+rgba(0,0,0,.5);
++position:+fixed;
++top:+0;
++left:+0;
++right:+0;
++height:+100%25;
++padding:+0+0+0+100px;
++overflow:+scroll;
}|2906645|<div+id='app'></div>
<div+id='overlay'></div>|2906646|2906647|(该示例在堆栈溢出上下文中不起作用。您将需要在独立页面中重新创建它。)|2906648|如果您想禁用#app容器的滚动，只需添加touch-action:+none;即可。|2906649|entityMap^0|R|J|0|0|0|0|0|0|0|0|6|4|K|J|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|13|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|14|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|Q|3|R|5|L|7|16|8|@]|D|@]|E|$M|N]]|$1|S|3|I|5|6|7|17|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|18|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|Y|$]]

<p>If the intent is to disable on mobile/ touch devices then the most straightforward way to do it is using <code>touch-action: none;</code>.</p>

<p>Example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const app = document.getElementById('app');
const overlay = document.getElementById('overlay');

let body = '';

for (let index = 0; index &lt; 500; index++) {
  body += index + '&lt;br /&gt;';
}

app.innerHTML = body;
app.scrollTop = 200;

overlay.innerHTML = body;</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#app {
  background: #f00;
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  line-height: 20px;
}

#overlay {
  background: rgba(0,0,0,.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  padding: 0 0 0 100px;
  overflow: scroll;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='app'&gt;&lt;/div&gt;
&lt;div id='overlay'&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>(The example does not work in the context of Stack Overflow. You will need to recreate it in a stand-alone page.)</p>

<p>If you want to disable scrolling of the <code>#app</code> container, just add <code>touch-action: none;</code>.</p>


blocks|key|2906676|text|大多数解决方案都存在不保留滚动位置的问题，所以我研究了Facebook是如何做到这一点的。除了将底层内容设置为position:+fixed外，他们还动态设置顶部以保留滚动位置：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2906677|scrollPosition+=+window.pageYOffset;
mainEl.style.top+=+-scrollPosition+%2B+'px';|code-block|syntax|javascript|2906678|然后，当您再次删除覆盖时，需要重置滚动位置：|2906679|window.scrollTo(0,+scrollPosition);|2906680|我创建了一个小示例来演示此解决方案|2906681|​|2906682|let+overlayShown+=+false;
let+scrollPosition+=+0;

document.querySelector('.toggle').addEventListener('click',+function()+{
++if+(!overlayShown)+{
++++++++showOverlay();
++}+else+{
++++removeOverlay();
++}
++overlayShown+=+!overlayShown;
});

function+showOverlay()+{
++++scrollPosition+=+window.pageYOffset;
++++const+mainEl+=+document.querySelector('.main-content');
++++mainEl.style.top+=+-scrollPosition+%2B+'px';
++++document.body.classList.add('show-overlay');
}

function+removeOverlay()+{
++++++++document.body.classList.remove('show-overlay');
++++window.scrollTo(0,+scrollPosition);
++++const+mainEl+=+document.querySelector('.main-content');
++++mainEl.style.top+=+0;
}|2906683|.main-content+{
++background-image:+repeating-linear-gradient(+lime,+blue+103px);
++width:+100%25;
++height:+200vh;
}

.show-overlay+.main-content+{
++position:+fixed;
++left:+0;
++right:+0;
++overflow-y:+scroll;+/*+render+disabled+scroll+bar+to+keep+the+same+width+*/
/*+Suggestion+to+put:+overflow-y:+hidden;+
Disabled+scrolling+still+makes+a+mess+with+its+width.+Hiding+it+does+the+trick.+*/
}

.overlay+{
++display:+none;
++position:+fixed;
++top:+0;
++left:+0;
++width:+100%25;
++height:+100%25;
++background:+rgba(0,+0,+0,+0.3);
++overflow:+auto;
}

.show-overlay+.overlay+{
++display:+block;
}

.overlay-content+{
++margin:+50px;
++background-image:+repeating-linear-gradient(+grey,+grey+20px,+black+20px,+black+40px);
++height:+120vh;
}

.toggle+{
++position:+fixed;
++top:+5px;
++left:+15px;
++padding:+10px;
++background:+red;
}

/*+reset+CSS+*/
body+{
++margin:+0;
}|2906684|<main+class="main-content"></main>

++<div+class="overlay">
++++<div+class="overlay-content"></div>
++</div>
++
++<button+class="toggle">Overlay</button>|2906685|2906686|entityMap^0|1J|F|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|17|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|18|8|@]|D|@]|E|$]]|$1|S|3|T|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|U|3|V|5|H|7|1A|8|@]|D|@]|E|$I|J]]|$1|W|3|X|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|Y|3|R|5|6|7|1C|8|@]|D|@]|E|$]]|$1|Z|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|10|$]]

<p>Most solutions have the problem that they do not retain the scroll position, so I took a look at how Facebook does it. In addition to setting the underlaying content to <code>position: fixed</code> they also set the top dynamically to retain the scroll position:</p>
<pre><code>scrollPosition = window.pageYOffset;
mainEl.style.top = -scrollPosition + 'px';
</code></pre>
<p>Then, when you remove the overlay again, you need to reset the scroll position:</p>
<pre><code>window.scrollTo(0, scrollPosition);
</code></pre>
<p>I created a little example to demonstrate this solution</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let overlayShown = false;
let scrollPosition = 0;

document.querySelector('.toggle').addEventListener('click', function() {
  if (!overlayShown) {
        showOverlay();
  } else {
    removeOverlay();
  }
  overlayShown = !overlayShown;
});

function showOverlay() {
    scrollPosition = window.pageYOffset;
    const mainEl = document.querySelector('.main-content');
    mainEl.style.top = -scrollPosition + 'px';
    document.body.classList.add('show-overlay');
}

function removeOverlay() {
        document.body.classList.remove('show-overlay');
    window.scrollTo(0, scrollPosition);
    const mainEl = document.querySelector('.main-content');
    mainEl.style.top = 0;
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.main-content {
  background-image: repeating-linear-gradient( lime, blue 103px);
  width: 100%;
  height: 200vh;
}

.show-overlay .main-content {
  position: fixed;
  left: 0;
  right: 0;
  overflow-y: scroll; /* render disabled scroll bar to keep the same width */
/* Suggestion to put: overflow-y: hidden; 
Disabled scrolling still makes a mess with its width. Hiding it does the trick. */
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: auto;
}

.show-overlay .overlay {
  display: block;
}

.overlay-content {
  margin: 50px;
  background-image: repeating-linear-gradient( grey, grey 20px, black 20px, black 40px);
  height: 120vh;
}

.toggle {
  position: fixed;
  top: 5px;
  left: 15px;
  padding: 10px;
  background: red;
}

/* reset CSS */
body {
  margin: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main class="main-content"&gt;&lt;/main&gt;

  &lt;div class="overlay"&gt;
    &lt;div class="overlay-content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;button class="toggle"&gt;Overlay&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|240090|text|在我的例子中，这些解决方案都不适用于iPhone+(iOS+11.0)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|240091|在我的所有设备上唯一有效的修复方法是这个--+ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-position|offset|length|240092|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/41601290/3642216^0|0|N|2B|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>In my case, none of these solutions worked out on iPhone (iOS 11.0). </p>

<p>The only effective fix that is working on all my devices is this one - <a href="https://stackoverflow.com/a/41601290/3642216">ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-position</a> </p>


blocks|key|2906757|text|overscroll-behavior+css属性允许在到达内容的顶部/底部时覆盖浏览器的默认溢出滚动行为。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2906758|只需将以下样式添加到覆盖：|2906759|.overlay+{
+++overscroll-behavior:+contain;
+++...
}|code-block|syntax|javascript|2906760|2906761|+Codepen+demo|blockquote|2906762|2906763|2906764|目前适用于Chrome、Firefox和IE(caniuse)|2906765|有关更多详细信息，请查看google+developers+article。|2906766|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/anon/pen/oEMmrm|1|https://caniuse.com/#search=overscroll-behavior|2|https://developers.google.com/web/updates/2017/11/overscroll-behavior^0|0|J|0|0|0|0|1|C|0|0|0|0|N|7|1|0|C|P|2|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1B|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1E|8|@]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|Q|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1K|8|@]|D|@$9|1L|A|1M|1|1N]]|E|$]]|$1|U|3|V|5|6|7|1O|8|@]|D|@$9|1P|A|1Q|1|1R]]|E|$]]|$1|W|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]|14|$5|Z|10|11|E|$12|15]]|16|$5|Z|10|11|E|$12|17]]]]

<p><code>overscroll-behavior</code> css property allows to override the browser's default overflow scroll behavior when reaching the top/bottom of content.</p>

<p>Just add the following styles to overlay:</p>

<pre><code>.overlay {
   overscroll-behavior: contain;
   ...
}
</code></pre>

<blockquote>
  <p><a href="https://codepen.io/anon/pen/oEMmrm" rel="noreferrer">Codepen demo</a></p>
</blockquote>

<p>Currently works in Chrome, Firefox and IE(<a href="https://caniuse.com/#search=overscroll-behavior" rel="noreferrer">caniuse</a>)</p>

<p>For more details check <a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior" rel="noreferrer">google developers article</a>.</p>


blocks|key|238915|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|238916|var+mywindow+=+$('body'),+navbarCollap+=+$('.navbar-collapse');++++
navbarCollap.on('show.bs.collapse',+function(x)+{
++++++++++++++++mywindow.css({visibility:+'hidden'});
++++++++++++++++$('body').attr("scroll","no").attr("style",+"overflow:+hidden");
++++++++++++});
++++++++++++navbarCollap.on('hide.bs.collapse',+function(x)+{
++++++++++++++++mywindow.css({visibility:+'visible'});
++++++++++++++++$('body').attr("scroll","yes").attr("style",+"");
++++++++++++});|code-block|syntax|javascript|238917|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>try this</p>

<pre><code>var mywindow = $('body'), navbarCollap = $('.navbar-collapse');    
navbarCollap.on('show.bs.collapse', function(x) {
                mywindow.css({visibility: 'hidden'});
                $('body').attr("scroll","no").attr("style", "overflow: hidden");
            });
            navbarCollap.on('hide.bs.collapse', function(x) {
                mywindow.css({visibility: 'visible'});
                $('body').attr("scroll","yes").attr("style", "");
            });
</code></pre>


blocks|key|2906794|text|您想要阻止的行为称为滚动链接。要禁用它，请设置|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2906795|overscroll-behavior:+contain;|code-block|syntax|javascript|2906796|在CSS中的覆盖上。|2906797|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>The behaviour you want to prevent is called scroll chaining. To disable it, set</p>

<pre><code>overscroll-behavior: contain;
</code></pre>

<p>on your overlay in CSS.</p>


blocks|key|2906808|text|如果想要停止body/html滚动，请按如下方式添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2906809|CSS|offset|length|style|BOLD|2906810|++++html,+body+{
++++++++height:+100%25;
++++}

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

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

++++.background-content{
++++++++height:+100%25;
++++++++overflow:+auto;
++++}|code-block|syntax|javascript|2906811|HTML|2906812|++++<div+class="overlay">
++++++++<div+class="overlay-content"></div>
++++</div>

++++<div+class="background-content">
++++++++lengthy+content+here
++++</div>|2906813|基本上，没有JS也可以做到这一点。|2906814|主要思想是添加html/body，其中height:+100%25，overflow:+auto。在你的overlay中，你可以根据你的需求启用/禁用滚动。|2906815|希望这能有所帮助！|2906816|entityMap^0|0|0|3|0|0|0|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@$D|14|E|15|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|18|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|X|$]]

<p>If you want to stop body/html scroll add as the following</p>

<p><strong>CSS</strong></p>

<pre class="lang-css prettyprint-override"><code>    html, body {
        height: 100%;
    }

    .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;
        }
    }

    .background-content{
        height: 100%;
        overflow: auto;
    }
</code></pre>

<p><strong>HTML</strong></p>

<pre class="lang-html prettyprint-override"><code>    &lt;div class="overlay"&gt;
        &lt;div class="overlay-content"&gt;&lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="background-content"&gt;
        lengthy content here
    &lt;/div&gt;
</code></pre>

<p>Basically, you could do it without JS.</p>

<p>The main idea is to add html/body with height: 100% and overflow: auto.
and inside your overlay, you could either enable/disable scroll based on your requirement.</p>

<p>Hope this helps!</p>


blocks|key|240125|text|你可以用一些“新的”css和JQuery很容易地做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|240126|最初:使用JQuery，你可以在‘body+{...+overflow:auto;}’和'body‘之间动态切换。当在'body‘上时，使用|offset|length|style|CODE|240127|body+{
+++position:+static;
+++overflow:+auto;
}|code-block|syntax|javascript|240128|当使用'overlay‘时|240129|body+{
+++position:+sticky;
+++overflow:+hidden;
}|240130|交换机的JQuery+(‘body’->‘overlay’)：|240131|$("body").css({"position":+"sticky",+"overflow":+"hidden"});|240132|交换机的JQuery+(‘overlay’->‘body’)：|240133|$("body").css({"position":+"static",+"overflow":+"auto"});|240134|entityMap^0|0|H|P|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|X|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

<p>You can easily do this with some "new" css and JQuery.</p>

<p>Initially: <code>body {... overflow:auto;}</code>
With JQuery you can dynamically switch between 'overlay' and 'body'. When on 'body', use </p>

<pre><code>body {
   position: static;
   overflow: auto;
}
</code></pre>

<p>When on 'overlay' use</p>

<pre><code>body {
   position: sticky;
   overflow: hidden;
}
</code></pre>

<p>JQuery for the switch('body'->'overlay'):</p>

<pre><code>$("body").css({"position": "sticky", "overflow": "hidden"});
</code></pre>

<p>JQuery for the switch('overlay'->'body'):</p>

<pre><code>$("body").css({"position": "static", "overflow": "auto"});
</code></pre>


blocks|key|241774|text|React+functional+component的一种解决方案是使用useEffect钩子。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|241775|下面是代码示例(注意useEffect的定义)：|241776|import+{useEffect,+useRef}+from+"react";

export+default+function+PopoverMenu({className,+handleClose,+children})+{
++const+selfRef+=+useRef(undefined);

++useEffect(()+=>+{
++++const+isPopoverOpenned+=+selfRef.current?.style.display+!==+"none";
++++const+focusedElement+=+document?.activeElement;
++++const+scrollPosition+=+{x:+window.scrollX,+y:+window.scrollY};
++++if+(isPopoverOpenned)+{
++++++preventDocBodyScrolling();
++++}+else+{
++++++restoreDocBodyScrolling();
++++}

++++function+preventDocBodyScrolling()+{
++++++const+width+=+document.body.clientWidth;
++++++const+hasVerticalScrollBar+=+(window.innerWidth+>+document.documentElement.clientWidth);
++++++document.body.style.overflowX+=+"hidden";
++++++document.body.style.overflowY+=+hasVerticalScrollBar+?+"scroll"+:+"";
++++++document.body.style.width+=+`${width}px`;
++++++document.body.style.position+=+"fixed";

++++}

++++function+restoreDocBodyScrolling()+{
++++++document.body.style.overflowX+=+"";
++++++document.body.style.overflowY+=+"";
++++++document.body.style.width+=+"";
++++++document.body.style.position+=+"";
++++++focusedElement?.focus();
++++++window.scrollTo(scrollPosition.x,+scrollPosition.y);
++++}


++++return+()+=>+{
++++++restoreDocBodyScrolling();+//+cleanup+on+unmount
++++};
++},+[]);

++return+(
++++<>
++++++<div
++++++++className="backdrop"
++++++++onClick={()+=>+handleClose+&&+handleClose()}
++++++/>
++++++<div
++++++++className={`pop-over-menu${className+?+(`+${className}`)+:+""}`}
++++++++ref={selfRef}
++++++>
++++++++<button
++++++++++className="pop-over-menu--close-button"+type="button"
++++++++++onClick={()+=>+handleClose+&&+handleClose()}
++++++++>
++++++++++X
++++++++</button>
++++++++{children}
++++++</div>
++++</>
++);
}|code-block|syntax|javascript|241777|最初发布在另一个相关的堆栈溢出问题上：https://stackoverflow.com/a/69016517/14131330|241778|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/69016517/14131330^0|T|J|0|0|O|0|0|0|1S|J|19|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@$9|16|A|17|1|18]]|E|$]]|$1|O|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>One <strong>solution for a React functional component</strong> is to use the <strong>useEffect hook</strong>.</p>
<p>Here's the code example bellow (pay attention to the useEffect definition):</p>
<pre><code>import {useEffect, useRef} from &quot;react&quot;;

export default function PopoverMenu({className, handleClose, children}) {
  const selfRef = useRef(undefined);

  useEffect(() =&gt; {
    const isPopoverOpenned = selfRef.current?.style.display !== &quot;none&quot;;
    const focusedElement = document?.activeElement;
    const scrollPosition = {x: window.scrollX, y: window.scrollY};
    if (isPopoverOpenned) {
      preventDocBodyScrolling();
    } else {
      restoreDocBodyScrolling();
    }

    function preventDocBodyScrolling() {
      const width = document.body.clientWidth;
      const hasVerticalScrollBar = (window.innerWidth &gt; document.documentElement.clientWidth);
      document.body.style.overflowX = &quot;hidden&quot;;
      document.body.style.overflowY = hasVerticalScrollBar ? &quot;scroll&quot; : &quot;&quot;;
      document.body.style.width = `${width}px`;
      document.body.style.position = &quot;fixed&quot;;

    }

    function restoreDocBodyScrolling() {
      document.body.style.overflowX = &quot;&quot;;
      document.body.style.overflowY = &quot;&quot;;
      document.body.style.width = &quot;&quot;;
      document.body.style.position = &quot;&quot;;
      focusedElement?.focus();
      window.scrollTo(scrollPosition.x, scrollPosition.y);
    }


    return () =&gt; {
      restoreDocBodyScrolling(); // cleanup on unmount
    };
  }, []);

  return (
    &lt;&gt;
      &lt;div
        className=&quot;backdrop&quot;
        onClick={() =&gt; handleClose &amp;&amp; handleClose()}
      /&gt;
      &lt;div
        className={`pop-over-menu${className ? (` ${className}`) : &quot;&quot;}`}
        ref={selfRef}
      &gt;
        &lt;button
          className=&quot;pop-over-menu--close-button&quot; type=&quot;button&quot;
          onClick={() =&gt; handleClose &amp;&amp; handleClose()}
        &gt;
          X
        &lt;/button&gt;
        {children}
      &lt;/div&gt;
    &lt;/&gt;
  );
}
</code></pre>
<p>Originally posted on this other related Stackoverflow question: <a href="https://stackoverflow.com/a/69016517/14131330">https://stackoverflow.com/a/69016517/14131330</a></p>


blocks|key|2906941|text|如果任何人正在为React+function+components寻找解决方案，您可以将其放入模态组件中：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2906942|+useEffect(()+=>+{
++++document.body.style.overflowY+=+'hidden';
++++return+()+=>{
++++++document.body.style.overflowY+=+'auto';
++++}
++},+[])|code-block|syntax|javascript|2906943|entityMap^0|13|E|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>if anyone is looking for a solution <strong>for React function components</strong>, you can put this inside the modal component:</p>
<pre><code> useEffect(() =&gt; {
    document.body.style.overflowY = 'hidden';
    return () =&gt;{
      document.body.style.overflowY = 'auto';
    }
  }, [])
</code></pre>


blocks|key|240200|text|body标记的简单内联样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|240201|<body+style="position:+sticky;+overflow:+hidden;">|code-block|syntax|javascript|240202|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Simple inline styling for the body tag:</p>
<pre><code>&lt;body style=&quot;position: sticky; overflow: hidden;&quot;&gt;
</code></pre>


<p>I've been searching for a "lightbox" type solution that allows this but haven't found one yet (please, suggest if you know of any).</p>

<p>The behavior I'm trying to recreate is just like what you'd see at <a href="http://www.pinterest.com">Pinterest</a> when clicking on an image. The overlay is scrollable (<em>as in the whole overlay moves up like a page on top of a page</em>) but the body <strong>behind</strong> the overlay is fixed.</p>

<p>I attempted to create this with just CSS (<em>i.e. a <code>div</code> overlay on top of the whole page and body with <code>overflow: hidden</code></em>), but it doesn't prevent <code>div</code> from being scrollable.</p>

<p>How to keep the body/page from scrolling but keep scrolling inside the fullscreen container?</p>


Prevent body scrolling but allow overlay scrolling

容器

我一直在寻找一种"lightbox“类型的解决方案，允许这样做，但还没有找到(如果你知道的话，请推荐)。我试图重建的行为就像你在点击图片时在上看到的一样。覆盖图是可滚动的(就像在整个覆盖图中一样，就像页面顶部的页面一样向上移动)，但是覆盖图后面的body 是固定的。我尝试使用CSS (即在整个页面和主体上覆盖一个带有o...

问禁止正文滚动，但允许覆盖滚动
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问禁止正文滚动，但允许覆盖滚动EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问禁止正文滚动，但允许覆盖滚动
EN