html - 在 Safari 和 Firefox 中拖动溢出 div 的内容滚动,而不是在 Chrome 中
问题描述
我正在尝试使用 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 元素。
解决方案
好吧,由于某种原因,Chrome 希望其中包含一些内容以供选择工作,这与 Firefox 不同。
您可以通过在内容 div 中包含一些文本并将其不透明度设置为 0 来模拟所需的行为。还可以使用 CSSuser-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>
推荐阅读
- ios - 将 UIView 附加到 LottieFiles 视图
- multithreading - 上下文切换:线程与进程
- c# - 当用户在 Xamarin.Forms 中同时单击多个项目时,如何修复 CollectionView SelectionMode="Single" 错误?
- node.js - 从智能合约数组中获取数据
- python-3.x - 为什么两次调用方法会导致 TypeError: object is not callable
- excel - Excel_VBA - 隐藏和取消隐藏列的时间逻辑
- xml - SonarLint.xml 和 Codacy Sonar Sharp 配置
- python - 如何访问 HasTraits/Chaco/Enable/Kiva Python GUI 应用程序的 base_pixel_scale 属性?
- javascript - per_page 不是整数类型。Woocommerce REST API Node.js
- asp.net - 如何将 google map apiKey 设置为环境变量以在 Asp.net 中确保安全 - Angular 应用程序