禁止されているいくつかの方法の下にあるモントの下のページをスクロールします。

6099 ワード
ぱちんこ窓 ふた底 スクロール禁止
シーン概要
よく知られているように、弾戸はよくある相互作用の方式であり、蒙層は弾戸とページの相互作用を一時的に遮断するために不可欠な要素である。しかし、蒙層の元素の中でスライドする時、内容の最後まで滑って、更にスライドし続けて、蒙層の底のページはスクロールを始めて、明らかにこれは私達の要る効果ではありませんて、そのためこのような行為を阻止する必要があります。
じゃ、どうやって阻止しますか？以下の分析を見てください。
ソリューション分析
プラン1
マスクを開くと、bodyにスタイルを追加します。

overflow: hidden;
height: 100%;
いくつかの機種では、ルートノードにスタイルを追加する必要があるかもしれません。

overflow: hidden;
上のスタイルを削除します。
利点:
簡単で便利です。cssスタイルを追加するだけで、複雑な論理がありません。
短所:
互換性が悪いので、pcに適用されます。移動端が気まずいです。
一部のAndroidやsafariでは、下のページのスクロールを止めることができません。
モバイル端末に適用する必要があるなら、ソリューション2が必要かもしれません。
シナリオ2
モバイル端末を利用したタッチイベントです。
Touchオブジェクトは一つの接点を表し、event.touches[0]で取得でき、各接点は位置、大きさ、形状、圧力の大きさ、およびターゲットelement属性を含む。

{
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
}
モバイル端末のtouchイベントを利用してデフォルトの挙動を阻止します。

// node     dom  
node.addEventListener('touchstart', e => {
 e.preventDefault()
}, false)
簡単で乱暴です。下のページも動かなくなりました。もしあなたの蒙層の内容がスクロールバーがないなら、上記の方法はprefectです。
しかし、空気が急に静かになるのが一番怖いです。カバーの中身にスクロールがあったら、もう動けなくなります。ですから、私たちはいくつかのjsロジックを書いて、デフォルトの行動を阻止するかどうかを判断します。複雑さは明らかに増加します。
具体的な考え：蒙層の内容が最後までスクロールするかどうかを判定すると、デフォルトの行為を阻止し、逆に横行させる。
Tip：ここで小さなテクニックを見つけました。多くのコードを省略できます。一回のスライドの中で、もし蒙層の内容がスクロールできるなら、蒙層の内容はスクロールして、過程の中で蒙層の内容はもう尽きましたとしても、手を緩めない限り（touchendイベントのトリガ前と理解できます）、引き続きスライドする時にページの内容はスクロールしません。この小さな技術を使って、私たちはコードロジックを最適化することができます。
サンプルコードは以下の通りです。

<body>
 <div class="page">
 <!--        ，        -->
 <p>  </p>
 <p>  </p>
 <button class="btn">    </button>
 <p>  </p>
 </div>
 <div class="container">
 <div class="layer"></div>
 <div class="content">
  <!--        ，        -->
  <p>  </p>
  <p>  </p>
  <p>  </p>
 </div>
 </div>
</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;
}

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)
問題は解決されたが，複雑度とコード量は明らかに勾配を増した。
簡単で便利な原則に基づいて、他の案も探せるのではないですか？
touch事件が複雑だと判断した以上、なぜこの枠から飛び出すのか、別の道を切り開いて、より適切な案を探ってみましょう。
そこで、私達の方案の3があります。
案3
私の考えを言いますと、ページのスクロールを阻止するなら、ウィンドウに固定したらどうですか？それならスクロールできなくなります。蒙層が閉まったら釈放します。
position：fixedは皆さんにあまり紹介しなくてもいいですよね。詳しい紹介はこの文章を参考にしてください。
もちろんいくつかの詳細を考慮して、ページをウィンドウに固定してから、内容は一番上の部分に戻ります。ここでは記録して、topの値を同期させる必要があります。
サンプルコード:

let bodyEl = document.body
let top = 0

function stopBodyScroll (isFixed) {
 if (isFixed) {
 top = window.scrollY

 bodyEl.style.position = 'fixed'
 bodyEl.style.top = -top + 'px'
 } else {
 bodyEl.style.position = ''
 bodyEl.style.top = ''

 window.scrollTo(0, top) //      top
 }
}
思考のまとめ
  • アプリケーションシーンがpcであれば、ソリューションを推薦します。本当にあまり便利ではないです。
  • アプリケーションシーンがh 5なら、ソリューション2を採用してもいいですが、案3
    • を採用することをお勧めします。
  • アプリケーションシーンが全プラットフォームであれば、シナリオ3は
    • を逃してはいけません。
    本論文はここまでもうすぐ終わります。ここで提案を強く紹介します。その理由は簡単、便利、互換性がいいからです。一回包装したら、永久に使えるからです。
    締め括りをつける
    以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考となる学習価値を持っています。質問があれば、メッセージを書いて交流してください。ありがとうございます。
    ノード.jsを利用してポートが占有されているかどうかを検出する方法。
    memcache整合性hashのphp実現方法