blocks|key|4363461|text|请参阅Does+overflow:hidden+applied+to++work+on+iPhone+Safari?|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4363462|在显示模式时，将.freezePage添加到html和正文|4363463|$('.modal').on('shown.bs.modal',+function+(e)+{
++$('html').addClass('freezePage');+
++$('body').addClass('freezePage');
});
$('.modal').on('hidden.bs.modal',+function+(e)+{
++$('html').removeClass('freezePage');
++$('body').removeClass('freezePage');
});|code-block|syntax|javascript|4363464|CSS|4363465|.freezePage{
++overflow:+hidden;
++height:+100%25;
++position:+relative;
}|4363466|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/3047337/does-overflowhidden-applied-to-body-work-on-iphone-safari^0|3|1J|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

refer to <a href="https://stackoverflow.com/questions/3047337/does-overflowhidden-applied-to-body-work-on-iphone-safari">Does overflow:hidden applied to &lt;body&gt; work on iPhone Safari?</a>

Added .freezePage to html and body when modal is showing

<pre><code>$('.modal').on('shown.bs.modal', function (e) {
 $('html').addClass('freezePage'); 
 $('body').addClass('freezePage');
});
$('.modal').on('hidden.bs.modal', function (e) {
 $('html').removeClass('freezePage');
 $('body').removeClass('freezePage');
});
</code></pre>

the CSS

<pre><code>.freezePage{
 overflow: hidden;
 height: 100%;
 position: relative;
}
</code></pre>

blocks|key|4363505|text|我的解决方案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4363506|scrollPos+=+window.scrollY++-+get+current+scroll+position.

body+{+position:+fixed;
+++margin-top:+-**scrollPos**+px);|code-block|syntax|javascript|4363507|}|4363508|然后关闭modal：|4363509|body+{position:+"";
++margin-top:+"";|4363510|4363511|并将滚动位置返回到打开模式窗口之前的位置：|4363512|window.scrollTo(0,+scrollPos);|4363513|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|W|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|M|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|Z|8|@]|9|@]|A|$]]|$1|P|3|Q|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

My solution:

<pre><code>scrollPos = window.scrollY - get current scroll position.

body { position: fixed;
 margin-top: -**scrollPos** px);
</code></pre>

}

Then modal is closed:

<pre><code>body {position: "";
 margin-top: "";
</code></pre>

}

and return scroll position to point before opened modal window:

<pre><code>window.scrollTo(0, scrollPos);
</code></pre>

blocks|key|4363097|text|我采用了@Aditya+Prasanthi和@JIm的解决方案，因为一个修复了背景滚动，另一个修复了关闭模式后跳到顶部，并将它们转换为一个最小的JS脚本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4363098|let+previousScrollY+=+0;

$(document).on('show.bs.modal',+()+=>+{
++++previousScrollY+=+window.scrollY;
++++$('html').addClass('modal-open').css({
++++++++marginTop:+-previousScrollY,
++++++++overflow:+'hidden',
++++++++left:+0,
++++++++right:+0,
++++++++top:+0,
++++++++bottom:+0,
++++++++position:+'fixed',
++++});
}).on('hidden.bs.modal',+()+=>+{
++++$('html').removeClass('modal-open').css({
++++++++marginTop:+0,
++++++++overflow:+'visible',
++++++++left:+'auto',
++++++++right:+'auto',
++++++++top:+'auto',
++++++++bottom:+'auto',
++++++++position:+'static',
++++});
++++window.scrollTo(0,+previousScrollY);
});|code-block|syntax|javascript|4363099|当然，使用类来设置和取消设置正文的CSS也是可能的，甚至是建议的，然而，我选择这个解决方案来解决一个地方的问题(并且不需要外部CSS+)。|4363100|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|$]]

I've taken the solutions of @Aditya Prasanthi and @JIm, since one fixes the background-scrolling and the other fixes the skip-to-the-top after closing the modal, and turned them into one bare-minimum JS script:

<pre><code>let previousScrollY = 0;

$(document).on('show.bs.modal', () =&gt; {
 previousScrollY = window.scrollY;
 $('html').addClass('modal-open').css({
 marginTop: -previousScrollY,
 overflow: 'hidden',
 left: 0,
 right: 0,
 top: 0,
 bottom: 0,
 position: 'fixed',
 });
}).on('hidden.bs.modal', () =&gt; {
 $('html').removeClass('modal-open').css({
 marginTop: 0,
 overflow: 'visible',
 left: 'auto',
 right: 'auto',
 top: 'auto',
 bottom: 'auto',
 position: 'static',
 });
 window.scrollTo(0, previousScrollY);
});
</code></pre>

It's, of course, possible and even adviced to use a class to set and unset the CSS for the body, however, I choose this solution to resolve a problem just in one place (and not require external CSS as well).

blocks|key|4363605|text|上面的答案对我都不起作用，模式一直在消失，我最终采用了一种暴力方法，虽然丑陋，效率低下，但却很有效！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4363606|$('body').on('touchstart+touchmove+touchend',+e+=>+{
++++let+scrollDisabled=$('.scroll-disable');
++++if+(scrollDisabled.length+>+0+&&++scrollDisabled.has($(e.target)).length===0)+{
++++++++e.preventDefault();+
++++++++e.stopPropagation();
++++}
});
setInterval(()+=>+$('.modal:visible').css('top',+'20px'),+100);

$(document).on({
++++'show.bs.modal':+e+=>+$(e.target).addClass('scroll-disable'),
++++'hidden.bs.modal':+e+=>+$(e.target).removeClass('scroll-disable')
},+'.modal');|code-block|syntax|javascript|4363607|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|$]]

None of the above answers worked for me, the modal kept disappearing and I ended up with a brute force approach which is ugly and inefficient but works ! 

<pre><code>$('body').on('touchstart touchmove touchend', e =&gt; {
 let scrollDisabled=$('.scroll-disable');
 if (scrollDisabled.length &gt; 0 &amp;&amp; scrollDisabled.has($(e.target)).length===0) {
 e.preventDefault(); 
 e.stopPropagation();
 }
});
setInterval(() =&gt; $('.modal:visible').css('top', '20px'), 100);

$(document).on({
 'show.bs.modal': e =&gt; $(e.target).addClass('scroll-disable'),
 'hidden.bs.modal': e =&gt; $(e.target).removeClass('scroll-disable')
}, '.modal');
</code></pre>

blocks|key|4363655|text|导入此文件并使用enableBodyScroll和disableBodyScroll函数锁定和解锁body滚动。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4363656|使用css+top属性将精确导航回上一个位置。它消除了处理浮点余量的缺点。|4363657|​|4363658|const+toggleBodyScroll+=+(position,+initialMargin)+=>+{
++document.body.style.position+=+position;
++document.body.style.top+=+initialMargin;
};

const+getScrolledPosition+=+()+=>+{
++return+window.pageYOffset+%7C%7C+document.documentElement.scrollTop+%7C%7C+document.body.scrollTop+%7C%7C+0;
};

const+scrollToPrevPosition+=+(scrolledPosition)+=>+{
++window.scrollTo(0,+scrolledPosition);
};

const+getWindowTop+=+()+=>+{
++return+window.getComputedStyle(document.body).getPropertyValue('top');
};

export+const+disableBodyScroll+=+()+=>+{
++toggleBodyScroll('fixed',+`-${getScrolledPosition()}px`);
};

export+const+enableBodyScroll+=+()+=>+{
++const+scrollPosition+=+0+-+parseInt(getWindowTop());
++toggleBodyScroll('static',+0);
++scrollToPrevPosition(scrollPosition);
};|code-block|syntax|javascript|4363659|4363660|entityMap^0|8|G|P|H|0|2|3|6|3|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|11|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|12|8|@]|D|@]|E|$M|N]]|$1|O|3|I|5|6|7|13|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|Q|$]]

Import this file and use the <code>enableBodyScroll</code> and <code>disableBodyScroll</code> functions to lock and unlock the body scroll.

using <code>css</code> <code>top</code> property will exactly navigate back to the previous position. It eliminate the drawback of dealing with the floating point margin.

<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>const toggleBodyScroll = (position, initialMargin) =&gt; {
 document.body.style.position = position;
 document.body.style.top = initialMargin;
};

const getScrolledPosition = () =&gt; {
 return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
};

const scrollToPrevPosition = (scrolledPosition) =&gt; {
 window.scrollTo(0, scrolledPosition);
};

const getWindowTop = () =&gt; {
 return window.getComputedStyle(document.body).getPropertyValue('top');
};

export const disableBodyScroll = () =&gt; {
 toggleBodyScroll('fixed', `-${getScrolledPosition()}px`);
};

export const enableBodyScroll = () =&gt; {
 const scrollPosition = 0 - parseInt(getWindowTop());
 toggleBodyScroll('static', 0);
 scrollToPrevPosition(scrollPosition);
};</code></pre>
</div>
</div>

blocks|key|4363727|text|这将阻止在iOS手机上打开Modal时的页面滚动|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4363728|if+($(window).width()+<+960)+{
++++++++let+previousScrollY+=+0;
++++++++$(document).on('show.bs.modal',+()+=>+{
++++++++++++previousScrollY+=+window.scrollY;
++++++++++++$('html').addClass('modal-open').css({
++++++++++++++++marginTop:+-previousScrollY,
++++++++++++++++overflow:+'hidden',
++++++++++++++++left:+0,
++++++++++++++++right:+0,
++++++++++++++++top:+0,
++++++++++++++++bottom:+0,
++++++++++++++++position:+'fixed',
++++++++++++});

++++++++}).on('hidden.bs.modal',+()+=>+{
++++++++++++$('html').removeClass('modal-open').css({
++++++++++++++++marginTop:+0,
++++++++++++++++overflow:+'visible',
++++++++++++++++left:+'auto',
++++++++++++++++right:+'auto',
++++++++++++++++top:+'auto',
++++++++++++++++bottom:+'auto',
++++++++++++++++position:+'static',
++++++++++++});
++++++++++++window.scrollTo(0,+previousScrollY);
++++++++});
++++}|code-block|syntax|javascript|4363729|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|$]]

This will prevent page scrolling while Modal is opened on iOS mobile

<pre><code>if ($(window).width() &lt; 960) {
 let previousScrollY = 0;
 $(document).on('show.bs.modal', () =&gt; {
 previousScrollY = window.scrollY;
 $('html').addClass('modal-open').css({
 marginTop: -previousScrollY,
 overflow: 'hidden',
 left: 0,
 right: 0,
 top: 0,
 bottom: 0,
 position: 'fixed',
 });

 }).on('hidden.bs.modal', () =&gt; {
 $('html').removeClass('modal-open').css({
 marginTop: 0,
 overflow: 'visible',
 left: 'auto',
 right: 'auto',
 top: 'auto',
 bottom: 'auto',
 position: 'static',
 });
 window.scrollTo(0, previousScrollY);
 });
 }
</code></pre>

So there is this known issue with modal on iOS, when the modal is enabled swiping up/down will scroll the body instead of the modal.

Using bootstrap 3.3.7

Tried to google it, most suggested adding

<pre><code>body.modal-open {
 overflow: hidden !important;
}
</code></pre>

but it doesn't work.

Some suggested,

<pre><code>body.modal-open {
 position: fixed;
}
</code></pre>

But background will jump to the top of the page.

So for now I am using,

<pre><code>body.modal-open {
 overflow: hidden !important;
 position: fixed;
 width: 100%;
}
#exampleModal {
 background: black;
}
</code></pre>

As a work-around so the jump can't be seen(but still noticeable)

Is there other solutions to this?

This is the site i am working on <a href="http://www.einproductions.com/" rel="noreferrer">http://www.einproductions.com/</a>

BootStrap Modal background scroll on iOS

所以在iOS上有一个关于模式的已知问题，当模式被启用时，向上/向下滑动将滚动正文而不是模式。使用bootstrap 3.3.7我试着在谷歌上搜索一下，大多数人建议添加body.modal-open {  overflow: hidden !important;}但它不起作用。一些人建议，body.modal-open ...

问iOS上的BootStrap模式背景滚动
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iOS上的BootStrap模式背景滚动EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iOS上的BootStrap模式背景滚动
EN