2

我想要做的是有一个.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: noneon .top，这将使鼠标事件“透明”，因此在它下面触发滚动，问题是点击事件也不起作用，因为我计划在里面有可点击和可选择的东西.top，这是个问题。我可以重新设置pointer-events为auto那些点击/可选择的东西，但考虑到其中一个可点击的东西会成为大标题，我会遇到滚动无法再次使用鼠标位置的问题。

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

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

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

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

1 回答 1

1

Not sure I understand 100% - you want to visually cover up a fixed element while scrolling but still be able to click on it?

One simple solution might be using 3 layers instead of 2.

Bottom layer contains your links and is fixed.

Middle layer is the one that will scroll over it and cover it up.

Top layer is fixed and is identical to Bottom layer except clear all the background colors and set opacity to 0.

When you scroll it would look like the bottom is being covered up but you could still click on the top invisible layer.

Might not work if you need to do things like drag to copy text or interact in other ways with the middle layer.

于 2014-04-25T21:00:34.063 回答