ホームページ >ウェブフロントエンド >jsチュートリアル >ポップアップウィンドウの一番下のページのスクロールを無効にする方法
ポップアップウィンドウの一番下のページのスクロールを無効にする方法
- 亚连オリジナル
- 2018-06-22 14:04:163264ブラウズ
ポップアップ レイヤーを作成する場合、必須の要素はマスク レイヤーです。ポップアップ レイヤーがスクロールするときは、通常、マスク レイヤーの一番下のページを固定する必要があります。ポップアップウィンドウのマスクレイヤーの下のページがスクロールしないようにする方法をいくつか紹介しますので、必要な方は参考にしてください。
シナリオの概要
ご存知のとおり、ポップアップ ウィンドウはインタラクションの一般的な方法であり、マスク レイヤーはポップアップ ウィンドウの重要な要素であり、ページをポップから分離するために使用されます。 -up ウィンドウをブロックし、ページの操作を一時的にブロックします。ただし、マスクされた要素をスライドするときにコンテンツの最後までスライドし、さらにスライドを続けると、マスクされたレイヤーの下部にあるページがスクロールし始めることは明らかであり、これは私たちが望んでいる効果ではないためです。行為を防ぐ必要があります。
では、それを止めるにはどうすればよいでしょうか？次の分析を参照してください:
計画分析
計画1
マスクレイヤーをオンにするとき、ボディにスタイルを追加します:
overflow: hidden; height: 100%;
一部のモデルでは、スタイルを追加する必要がある場合もあります。ルートノード:
overflow: hidden;
マスクレイヤーをオフにする場合は、上記のスタイルを削除します。
利点:
シンプルで便利、CSSスタイルを追加するだけで、複雑なロジックは必要ありません。
短所:
互換性は良くなく、PCには適していますが、モバイル版は扱いにくいです。
Androidの一部機種とSafariでは、一番下のページのスクロールを防ぐことができません。
モバイル端末に適用する必要がある場合は、オプション 2 が必要になる場合があります。
オプション2
は、モバイル側でタッチイベントを使用することです
Touchオブジェクトは、event.touches[0]を通じて取得できるタッチポイントを表します。各タッチポイントには、位置、サイズ、形状が含まれます。 、圧力レベル、およびターゲット要素の属性。
{
screenX: 511,
screenY: 400,//触点相对于屏幕左边沿的Y坐标
clientX: 244.37899780273438,
clientY: 189.3820037841797,//相对于可视区域
pageX: 244.37,
pageY: 189.37,//相对于HTML文档顶部，当页面有滚动的时候与clientX=Y 不等
force: 1,//压力大小，是从0.0(没有压力)到1.0(最大压力)的浮点数
identifier: 1036403715,//一次触摸动作的唯一标识符
radiusX: 37.565673828125, //能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径
radiusY: 37.565673828125,
rotationAngle: 0,//它是这样一个角度值：由radiusX 和 radiusY 描述的正方向的椭圆，需要通过顺时针旋转这个角度值，才能最精确地覆盖住用户和触摸平面的接触面
target: {} // 此次触摸事件的目标element
}モバイル側のタッチイベントを使用して、デフォルトの動作を防止します（ここでは、ページのスクロールがデフォルトの動作であることが理解できます）。
// node为蒙层容器dom节点
node.addEventListener('touchstart', e => {
e.preventDefault()
}, false)シンプルで粗雑ですが、スクロール時に下のページが移動できません。マスクされたコンテンツにスクロール バーがない場合は、上記の方法が最適です。
しかし、最も恐ろしいのは、マスクレイヤーのコンテンツにスクロールバーがある場合、空気が突然静かになることです。したがって、デフォルトの動作を防ぐかどうかを決定するための js ロジックを記述する必要があり、複雑さが大幅に増加します。
具体的なアイデア: マスクされたコンテンツが最後までスクロールされるかどうかを判断します。そうである場合は、デフォルトの動作を防止します。そうでない場合は、横行させます。
ヒント: ここで、多くのコードを節約できる小さなトリックを見つけました。スライド中に、マスクされたコンテンツがスクロールできる場合、マスクされたコンテンツが最後までスクロールしたとしても、手を放さない限り (これは touchend イベントがトリガーされる前と理解できます) スクロールされます。 )、スライドを続けてもページのコンテンツはスクロールしません。放してスクロールを続けると、ページのコンテンツがスクロールします。この小さなトリックを使用すると、コード ロジックを合理化して最適化できます。
サンプルコードは以下の通りです:
<body> <p class="page"> <!-- 这里多添加一些，直至出现滚动条 --> <p>页面</p> <p>页面</p> <button class="btn">打开蒙层</button> <p>页面</p> </p> <p class="container"> <p class="layer"></p> <p class="content"> <!-- 这里多添加一些，直至出现滚动条 --> <p>蒙层</p> <p>蒙层</p> <p>蒙层</p> </p> </p> </body>
body {
margin: 0;
padding: 20px;
}
.btn {
border: none;
outline: none;
font-size: inherit;
border-radius: 4px;
padding: 1em;
width: 100%;
margin: 1em 0;
color: #fff;
background-color: #ff5777;
}
.container {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1001;
display: none;
}
.layer {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
background-color: rgba(0, 0, 0, .3);
}
.content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50%;
z-index: 2;
background-color: #f6f6f6;
overflow-y: auto;
}rree問題は解決しましたが、振り返ってみると明らかに複雑さとコード量が勾配的に増加しています。
シンプルさと利便性の原則に基づいて、他のソリューションを検討できますか?
タッチ イベントの決定はより複雑であるため、この枠から抜け出し、別の方法を見つけ、より適切なソリューションを検討してみてはいかがでしょうか。
ということで、計画は 3 つあります。
オプション 3
私のアイデアについて話させてください。ページがスクロールしないようにしたいので、マスクがかかっているときにスクロールしたり解放したりできないようにウィンドウ内で固定してはどうでしょうか。閉まっている 。
position:fixed については、あまり説明する必要はありません。詳細については、この記事を参照してください: //www.jb51.net/article/83175.htm
もちろん、いくつかの詳細があります。ページを変更します。ウィンドウを修正すると、コンテンツが先頭に戻ります。ここでは、それを記録し、先頭の値を同期する必要があります。
サンプルコード:
const btnNode = document.querySelector('.btn')
const containerNode = document.querySelector('.container')
const layerNode = document.querySelector('.layer')
const contentNode = document.querySelector('.content')
let startY = 0 // 记录开始滑动的坐标，用于判断滑动方向
let status = 0 // 0：未开始，1：已开始，2：滑动中
// 打开蒙层
btnNode.addEventListener('click', () => {
containerNode.style.display = 'block'
}, false)
// 蒙层部分始终阻止默认行为
layerNode.addEventListener('touchstart', e => {
e.preventDefault()
}, false)
// 核心部分
contentNode.addEventListener('touchstart', e => {
status = 1
startY = e.targetTouches[0].pageY
}, false)
contentNode.addEventListener('touchmove', e => {
// 判定一次就够了
if (status !== 1) return
status = 2
let t = e.target || e.srcElement
let py = e.targetTouches[0].pageY
let ch = t.clientHeight // 内容可视高度
let sh = t.scrollHeight // 内容滚动高度
let st = t.scrollTop // 当前滚动高度
// 已经到头部尽头了还要向上滑动，阻止它
if (st === 0 && startY < py) {
e.preventDefault()
}
// 已经到低部尽头了还要向下滑动，阻止它
if ((st === sh - ch) && startY > py) {
e.preventDefault()
}
}, false)
contentNode.addEventListener('touchend', e => {
status = 0
}, false)考え方のまとめ
アプリケーションシナリオがPCの場合、推奨オプション1は実際にはあまり便利ではありません
アプリケーションシナリオがh5の場合、オプション2を使用できますが、オプション 3 を採用することをお勧めします
アプリケーション シナリオがすべてのプラットフォームである場合は、オプション 3 を見逃すことはできません
この記事はここで終わります。簡単なので、ここでオプション 3 を強くお勧めします。 、便利で互換性があり、一度パッケージ化すると永久に持続します。
上記は私があなたのためにまとめたものです。
関連記事:
以上がポップアップウィンドウの一番下のページのスクロールを無効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。