个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
24
4
问题:
我有两个带有溢出文本内容的容器，如下所示: 
凡蓝<div>我们有overflow:hidden .现在我想以自定义的同步*方式滚动这些 div，而不管在白色容器中的什么位置 <div>我滚动。我的想法是我可以创建一个绝对定位的透明 <div>作为白色容器的直接 child ，并给它一个溢出的 child :
其中蓝色容器的 z-index 比原来的两个文本容器高:
.container {
width: 100vw;
height: 100vh;
z-index: 10;
position: absolute;
overflow-y: scroll;
}
所以最终的结果看起来是这样的:
现在我希望能够滚动覆盖容器但捕获底层元素中的其他鼠标事件(如文本选择)。
我的目标是在滚动覆盖容器时使用 JavaScript 手动滚动底层容器。
问题:
鉴于有 no way使用 css 属性有选择地禁用指针事件 pointer-events , 是否有任何其他方法可以仅启用覆盖元素的滚动事件，同时将其他指针事件传递给底层元素？
背景:
*我正在尝试实现的与 Perforce P4Merge 使用他们的 diff 工具所做的类似。他们有一个垂直滚动条用于 2 个代码块，我假设滚动高度大于两个代码块中的任何一个。在某些情况下，滚动事件会滚动两个代码块，有时只是其中一个，而在其他情况下，它们会以不同的速度滚动(取决于添加和删除的内容)。
更新:原始实现是用 React 编写的，在该代码中我不需要 margin-left: -18px;在 scrollable-container显示滚动条。不知道为什么。此外，如果您愿意，这里有一个代码笔:codepen snippet
body {
overflow-y: hidden;
}
.app {
overflow-y: hidden;
position: relative;
display: flex;
flex-direction: row;
z-index: 0;
}
.scrollable-container {
width: 100vw;
height: 100vh;
z-index: 10;
margin-left: -18px;
position: absolute;
overflow-y: scroll;
}
.scrollable-content {
width: 500px;
height: 1600px;
}
.non-scrollable-container {
flex: 1;
height: 100vh;
overflow-y: hidden;
}
.bridge {
width: 40px;
background: linear-gradient(white, black);
cursor: ew-resize;
height: 100vh;
}
#original {
background: linear-gradient(red, yellow);
height: 2100px;
}
#modified {
background: linear-gradient(blue, green);
height: 1600px;
}<div class="app">
<div class="scrollable-container">
<div class="scrollable-content"></div>
</div>
<div class="non-scrollable-container">
<div id="original" class="codeBlock">
Content I want to select
</div>
</div>
<div class="bridge"></div>
<div class="non-scrollable-container">
<div id="modified" class="codeBlock">
Content I want to select
</div>
</div>
</div>最佳答案
这个问题已经很老了，但是万一有人在这里寻找类似的东西，我找到了解决方案。我使用 Java 脚本事件监听器暂时禁用 mousedown 上的指针事件，并重新启用其父级鼠标弹起时的指针事件
function addlistener() {
var scrollable = document.getElementsByClassName("scrollable-container")[0];
scrollable.addEventListener('mousedown', function() {
this.style.pointerEvents = "none";
document.elementFromPoint(event.clientX, event.clientY).click();
}, false);
document.getElementsByClassName("app")[0].addEventListener('mouseup', function(e) {
scrollable.style.pointerEvents = "all";
}, false);
}body {
overflow-y: hidden;
}
.app {
overflow-y: hidden;
position: relative;
display: flex;
flex-direction: row;
z-index: 0;
}
.scrollable-container {
width: 100vw;
height: 100vh;
margin-left: -18px;
position: absolute;
overflow-y: scroll;
z-index: 10;
}
.scrollable-content {
width: 500px;
height: 1600px;
}
.non-scrollable-container {
flex: 1;
height: 100vh;
overflow-y: hidden;
}
.bridge {
width: 40px;
background: linear-gradient(white, black);
cursor: ew-resize;
height: 100vh;
}
#original {
background: linear-gradient(red, yellow);
height: 2100px;
}
#modified {
background: linear-gradient(blue, green);
height: 1600px;
}<body onload="addlistener()">
<div class="app">
<div class="scrollable-container">
<div class="scrollable-content"></div>
</div>
<div class="non-scrollable-container">
<div id="original" class="codeBlock">
Content I want to select
</div>
</div>
<div class="bridge"></div>
<div class="non-scrollable-container">
<div id="modified" class="codeBlock">
Content I want to select
</div>
</div>
</div>
</body>关于javascript - 禁用除覆盖 div 上的滚动之外的所有指针事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50315332/
24
4
0
我正在努力解决一个问题 Rahul 正在玩一个非常有趣的游戏。他有 N 个圆盘(每个圆盘的半径相等)。每个磁盘都有一个不同的数字，从 1 到 N 与之相关联。磁盘一个接一个地放在一堆中。 Rahul
我正在尝试使用此代码发出请求: public JsonObject account() throws BinanceApiException { return (new Request
我使用的是 Mac OS 和 emacs -nw (终端模式)。 我不知道如何在 emacs 之外粘贴东西(已由 M-w 在 emacs -nw 中实现)。 我知道emacs -ns可以做到。 搜索互
我试图让导航栏菜单出现在“标题容器”菜单中，但由于某种原因，导航栏链接流到外面(在修改浏览器窗口之前)。我不明白为什么，但我怀疑它与这一行有关: div class="collapse navbar-
我们的项目是在 WAS 6.1/hibernate/struts 上使用 RAD 7.0 开发的中型 Web 应用程序，该应用程序已投入生产。目前我们在属性文件中硬编码了生产系统的 IP 地址，在 h
我的要求是在传单中创建 N 类型的标记。该列表很大，无法容纳在 map 区域中。 我想要类似的东西: http://blog.georepublic.info/2012/leaflet-example
如 docs 中所述，基于 spring-boot 的 Web 服务正在使用 Sentry .它工作正常，但不应将某些异常发送到 Sentry ，例如为了在某些请求上返回 HTTP 状态 410
我已经阅读了 Apple Core Animation 文档。它说核心动画没有提供在窗口中实际显示图层的方法，它们必须由 View 托管。当与 View 配对时， View 必须为底层图层提供事件处理
我试图在滚动时检查元素是否在我的视口(viewport)内。如果它在我的视口(viewport)之外，我会添加一个类来将元素固定到顶部。 我用来确定元素是否在视口(viewport)之外的函数是: i
我正在查询中创建一个弹出窗口。悬停时弹出窗口一切正常。当用户的鼠标离开 div 以关闭它时，我让它看到计时器启动。如果他在计时器完成之前再次进入 div，则计时器将被清除。 这很好，但是如果用户点击
我使用名为 zonemap 的字典创建了一个 4x6 区域 map 。我在该字典中嵌套了多个字典；每个区域代表玩家可以访问并与之互动的区域。我希望能够将玩家的移动限制在该 4x6 区域，并重新显示他们
我正在构建一个页面，该页面将使用 ajax 来更新主要内容区域。用户将单击左侧菜单栏中的项目来更新右侧的 div 并包含搜索结果。 我想检测用户是否向下滚动到目前为止导致右侧结果 div 移出视口(v
好的，我在 div 中有一个带有拖放类的表格，其溢出设置为“自动”，这允许我隐藏部分时间表，只在底部放置一个滚动条。但是，我只是在可滚动 div 之外创建了一些可放置元素，并且我的可拖动元素无法离开可
我有大量项目绑定(bind)到 ListBox，VirtualizingStackPanel 设置为它的 ItemsPanel。随着用户滚动和项目容器的创建，我做了一些工作来用数据填充项目(使用数据库
我想知道是否有一种方法可以将类成员的访问范围专门限定为在 C# 中获取/设置实现，以减少我意外直接访问它们的可能性。类似 private 的东西，但只允许 get/set 访问它，我想我可以将每个变量
我正在尝试编写一个小游戏，以应用我自己在本类(class)中学到的概念。当游戏打开时，我想要一个自定义模态视图来告诉用户如何玩。同样，当他们输了时，我想呈现一个结果页面，该页面将位于 if 语句内。我
我有一个非常具体的 HTML/CSS 和/或 JS 问题。我在 this fiddle here 创建了一个示例显示问题。 我有一个可滚动的 div，它是一个表的父级: ...我的表格行之一包
我的 jar 文件中打包了一个 exe，我试图将它复制到一个临时位置，以便我可以使用 Desktop.browse() 运行它，为此我设置了一个使用 class.getResourceAsStream
您好，我对这段代码有疑问。我的问题是第一个 console.log(smile_per_sec) 给了我需要的值，但是第二个给了我声明变量时给它的值。 $.getJSON( twitter
我必须更改标记弹出窗口的默认大小以容纳我想放入其中的数据。我更改了一些 map 设置，因此当用户将其拖出 View 时，它总是会弹回最大范围。我遇到的问题是，对于靠近边缘的标记，当它的弹出窗口打开时，
我是一名优秀的程序员,十分优秀！