モバイルページのスクロール浸透の問題 [オリジナル]_html/css_WEB-ITnose

最近、WeChat ページを作成しているときに問題が発生しました。ページ上のボタンをクリックしてポップアップ ボックスと透明マスクを表示した後、理論的には下部の親ページを操作できません。 。しかし、現在のポップアップ ボックスと透明マスクで構成されるページをスライドすると、下部の親ページも一緒にスクロールします。これは、いわゆるモバイル ページの浸透の問題です。

Baidu は多くの方法を試しましたが、依然としてこの問題を完全に解決できませんでした。ただし、これらの方法もここにまとめてリストする予定であり、将来的にはより良いソリューションが提供されることを期待しています。

方法 1:

.alpha {     height: 100%;     overflow: hidden;     position: relative;}.alpha body {     height: 100%;     overflow: hidden;}

ポップアップ ボックスの表示または非表示を切り替えるときは、CSS を切り替えるだけです。つまり、

$('html').toggleClass('alpha');

もちろん実際に使用する場合は、このコードを逆アセンブルして使用する必要がある場合があります。たとえば、ボタンをクリックしてポップアップボックスを表示するときにこの CSS を使用する必要があります。つまり、

$('html').toggleClass('alpha');

[OK] または [キャンセル] をクリックしてポップアップ ボックスが表示されなくなったら、CSS を削除して親ページを通常のスクロール状態 (つまり、

この方法の欠点は、ページのコンテンツを 1 つの画面に表示できない場合、すべてのコンテンツを表示するには画面をスクロールする必要があり、ポップアップ ボックスがページの上部に表示されることです。上記の CSS はページの高さを画面の高さとして定義しているため、ポップアップ ボックスを非表示にすると、ページの下部が一時的にインターセプトされることになります。デフォルトでは、前にボタンをクリックした場所 (ボタンはページの下部にあります) には戻りません。ページが非常に長い場合、ユーザー エクスペリエンスはあまり良くありません。方法 2:

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

.noscroll {    position: fixed!important}

にも上記の欠点があります。 方法 3:

var page = document.getElementsByTagName('body')[0];//禁止页面滚动page.classList.add('noscroll');//恢复页面滚动page.classList.remove('noscroll');

この方法には上記の問題はありませんが、残念ながらモバイルでは役に立ちません。 PCブラウザでのみご利用いただけます。

//If you want to use the iframe's scrollbar and not the parent's use thisdocument.body.style.overflow = 'hidden';//If you want to use the parent's scrollbar and not the iframe's then you need to use:document.getElementById('your_iframes_id').scrolling = 'no';or set the scrolling="no" attribute in your iframe's tag: <iframe src="some_url" scrolling="no">

この記事の永久アドレス: http://blog.it985.com/15205.html

この記事は IT985 ブログからのものです。再版。