今日、バグ修正リクエストを受け取りました。ユーザーが左側のメニューバーの下部でマウスをスクロールし続けると、右側のメインコンテンツがスクロールします。これは禁止する必要があります。つまり、メニューバーのスクロールは影響しません。右側のメインコンテンツ。
一緒に書く習慣を身につけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して4日目です。クリックしてイベントの詳細をご覧ください。
いくつかの調査とデータ検索の後、私は2つの解決策を思いつきました。
- マウスが左側の下部に入ると、メインコンテンツコンテナのスクロールバーが非表示になり、スクロールバーが非表示になり、当然スクロールできなくなります。
- スクロールリスナーイベントを左下の領域に追加して、デフォルトの動作（つまり、ページスクロールのトリガーと伝播の動作）を防ぎます。
スクロールバーを非表示
要素のスクロールバーを非表示にするには、次のスタイルが必要です。
.container.disable-scrollbar {
/* hide scrollbar in firefox */
scrollbar-width: none;
}
.container.disable-scrollbar::-webkit-scrollbar {
display: none;
}
复制代码マウスが左下の領域に入ったときにスクロールバーを非表示にし、マウスが左下の領域から移動したときに再表示する必要があります。デフォルトでは非表示になりません。
const bottomEleContainer = ...
const mainEleContainer = ....
bottomEleContainer.addEventListener('mouseenter',()=>{
//激活上述样式
mainEleContainer.className = 'disable-scrollbar'
})
bottomEleContainer.addEventListener('mouseleave',()=>{
//取消激活上述样式
mainEleContainer.className = ''
})
复制代码マウスホイールのデフォルトの動作を防止する
ここで、要素にマウスホイールイベントリスナーを追加する必要があります。
bottomEleContainer.addEventListener('wheel', (e)=>{
//阻止默认行为（页面的滚动行为）
e.preventDefault()
},{
//这里一定要显式设置为false，因为默认是true
passive: false,
})
复制代码ノードで直接リッスンする直接的な方法をReact回避する必要がある方法を使用するが、フックのような方法でDOMノードのアプリケーションを取得し、次に上記のネイティブな方法を使用してリッスンする場合は、削除を返すことを忘れないでくださいフック内のイベントリスナーのコード。onWheeluseRef
要約する
最初のものの欠点はより明白です：
- 追加のcssコード（互換性コードを含む）
- スクロールバーの表示を切り替えると、ページ上のコンテンツボックスのサイズが変更され、コンテンツボックスのサイズを変更すると、ページが再配置されます。
- 特定の結合があります。メインページコンテナが変更され、時間内に同期されない場合、コードは失敗します
2つ目を見てみましょう。上記の欠点がなく、簡単です。2つ目を選択することにしました。