Question

我想在页面中的所有其他元素上添加欢迎栏目（div）。

我使用绝对，z-index和不透明度。

我不希望任何动作（点击，滚动，标题，悬停..）与我的主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是.main的孩子，您也可以使用.stopPropagation()拦截它们。

定位绝对和滚动问题

2 个答案: