ポジションアブソリュートとスクロールの問題

Question

私のページの他のすべての要素にウェルカムセクション（div）が必要です。

私は絶対、z-インデックスと不透明度を使用します。

メインのdivの下にある他のすべての要素でアクション（クリック、スクロール、タイトル、ホバー..）を望んでいません。メインのdivが行動して、ページ/画面。

.scroll { 
 
    height: 200px; 
 
    width: 400px; 
 
    overflow-y: scroll; 
 
} 
 

 
.main-welcome { 
 
    z-index: 9999; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: red; 
 
    opacity: 0.5; 
 
}

<div class="main-welcome"></div> 
 

 
<div class="scroll"> 
 
    <a>What is Lorem Ipsum? 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 

 

 
Why Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. 
 

 
Where can I get some? 
 
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected hu</a> 
 
</div>

しかし、私はクロームの開発者ツールを開き、応答mode.Iを選択すると、メインのdivの下にある私のスクロールのdivをスクロールすることができます。

もう一度、私は他の要素とのcss/htmlアクションは望んでいません。

解決策はありますか？あなたの.scroll上のポインタイベントを無効にする必要があります

Answer 1

次のいずれか

pointer-events: none; 

これはまだいくつかの環境でのスクロールが可能かもしれないが、他のすべてを停止する必要があります。

他のより信頼性の高い方法は、すべてのイベントをインターセプトして、それらのイベントを防止することです。

.scrollの子が.mainだった場合は、.stopPropagation()を使用して傍受することもできます。

Answer 2

あなたは.container

position: relative; 

それとも、スクロールバーを表示したくないでは、相対的に変更位置をスクロールしたい場合。そして、あなたは関係なく、画面のサイズを変更する方法スクローラーを見ることはない

.scroll{ 

width:90%; 
overflow-y:scroll; 

} 

：これは.scroll場合

ある場合だけに変更します。