在 Safari 和 Firefox 中拖动溢出 div 的内容滚动，而不是在 Chrome 中

Question

我正在尝试使用 HTML 画布创建自定义 ui，但我想保留本机滚动行为。我提出了一个技巧，我用空的透明 div 覆盖我的画布，并根据 div 的滚动位置重新绘制画布。这非常有效，除非尝试允许用户选择在画布上绘制的东西。通常，您会希望元素滚动，这在 Safari 和 Firefox 中都会发生，但在 Chrome 中则不然。

想象下面的 HTML 代码：

.container {
  width: 100px;
  height: 100px;
  overflow: auto;
  margin-bottom: 20px;
  border: 2px solid black;
}

.content {
width: 1000px;
height: 1000px;
background: rgb(34,193,195);
background: radial-gradient(circle, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}

.item {
border: 1px solid blue;
width: 50px;
height: 50px;
}

<div class="container">
  <div class="content"></div>
</div>

<div class="container">
  <div class="content">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

这将创建两个包含可滚动内容的容器。尝试在它们两个中单击并拖动鼠标按钮，就好像您试图在其中选择一些不可见的文本一样。在 Safari 和 Firefox 中，两个容器都会滚动。在 Chrome 中，只有第二个（包含内部 .item div）会滚动。

有没有办法在 Chrome 中获得所需的行为？我想避免创建大量（数千）DOM 元素。

Answer 1

由于某种原因，Chrome 希望其中包含一些内容以供选择工作，这与 Firefox 不同。

您可以通过在内容 div 中包含一些文本并将其不透明度设置为 0 来模拟所需的行为。还可以使用 CSS user-select: all; 在第一次点击时选择整个文本。

注意：只有当光标在容器边界内时滚动才有效（在 chrome 中）。

.container {
  width: 100px;
  height: 100px;
  overflow: auto;
  margin-bottom: 20px;
  border: 2px solid black;
}

.content {
  width: 1000px;
  height: 1000px;
  background: rgb(34, 193, 195);
  background: radial-gradient(circle, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
  user-select: all;
}

.content span{
  opacity: 0;
}

.item {
  border: 1px solid blue;
  width: 50px;
  height: 50px;
}

<div class="container">
  <div class="content"><span>a</span></div>
</div>

<div class="container">
  <div class="content">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>