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

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

WBOY

リリース： 2016-06-21 08:59:48

オリジナル

1272 人が閲覧しました

最近、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 ブログからのものです。再版。