css/js 将固定元素上的滚动事件委托给它们下面的元素

Posted 2023-02-24

【中文标题】css/js 将固定元素上的滚动事件委托给它们下面的元素

【英文标题】：css/js delegating scroll event on fixed elements to elements underneath them

【发布时间】：2014-04-25 19:27:40

【问题描述】：

我想做的是有一个固定的块（我们称之为.top）和另一个块（我们称之为.content），当滚动时，它会越过.top，这个同时保留.top 包含的所有可点击内容。

现在有一些明显的设置

这个 http://jsbin.com/rucifuzu/1/edit?html,css,output

或者这个 http://jsbin.com/hufomaxu/1/edit?html,css,output

两者的问题是 a) 你必须考虑滚动条的宽度 b) 在 .top 上滚动/滑动不会对下面带有 overflow: auto 的元素做任何事情

我已经考虑了几个解决方案。

首先是pointer-events: none on .top，这会使鼠标事件“透明”，因此在它下面触发滚动，问题是点击事件也不起作用，因为我计划在.top 中添加可点击和可选择的东西，这是个问题。我可以将pointer-events 重置回auto 只是为了那些点击/可选择的东西，但考虑到其中一个可点击的东西会成为大标题，我会遇到滚动无法再次使用鼠标位置的问题.

其次是我所说的滚动委托，使用 JS 我会捕获鼠标滚轮事件并更改 overflow: auto 元素上的滚动顶部。这可以正常工作，但它可能会在此委托发生时以及在.content 上的本机滚动启动时导致不同的滚动“感觉”。在触摸设备上正确执行此操作也很痛苦。

所以两者都不理想。我错过了这个问题的任何巧妙而简单的解决方案吗？

TL;DR 目标是让 .top 元素既可点击又“可滚动”

这样.top 是可点击的，但它下面的元素不会滚动 - http://jsbin.com/hufomaxu/1/edit?output 这样它下面的元素会滚动，但.top 不可点击 - http://jsbin.com/tuluwili/1/edit?output

【问题讨论】：

我一直在用iScroll5，还不错。 cubiq.org/iscroll-5

@Diodeus 我实际上将 iScroll 用于网站的不同部分，但除非我遗漏了什么，否则它对我没有帮助..

你找到解决方案了吗？..

恐怕没有解决办法@BrianHaak

【参考方案1】：

不确定我是否 100% 理解 - 您想在滚动时从视觉上掩盖固定元素但仍能点击它？

一个简单的解决方案可能是使用 3 层而不是 2 层。

底层包含您的链接并且是固定的。

中间层是滚动覆盖它的那一层。

顶层是固定的，除了清除所有背景颜色并将不透明度设置为0之外，与底层相同。

当你滚动时，它看起来就像底部被遮住了，但你仍然可以点击顶部的不可见层。

如果您需要执行诸如拖动以复制文本或以其他方式与中间层交互等操作，则可能无法正常工作。

【讨论】：

我不需要能够在它隐藏时单击它，但我确实需要能够在它尚未隐藏时单击它并且我需要滚动事件来处理它（不会，因为固定元素本身没有任何滚动条）..检查示例，应该很明显。如果我将其设置为底部（内容层）覆盖顶层，并使用顶部的一些边距来保持顶层最初可见，但随后将不可点击（因为底层将在它之上）.. 所以我正在寻找一种同时让时钟和滚动工作的方法..