绝对位置和滚动问题

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> 

但是当我打开chrome开发工具并选择响应模式时，我可以滚动位于主div下的滚动div。

同样，我不希望其他元素具有任何CSS / HTML操作。

有解决方案的主意吗？

Answer 1

如果要滚动，请在.container位置更改为相对

position: relative;

或者，您不想看到滚动条。 如果是这样的话

在.scroll中，只需更改为：

.scroll{

width:90%;
overflow-y:scroll;

}

这样，无论如何调整屏幕大小，您都不会看到滚动条。

Answer 2

您要么必须在.scroll上禁用指针事件：

pointer-events: none;

在某些环境中，这仍可能允许滚动，但在其他环境中应停止滚动。

另一种更可靠的方法是拦截所有事件并阻止它们执行操作。

如果.scroll是.scroll的子.main ，则还可以使用.stopPropagation()来拦截它们。