我要做的是有一个块(我们称之为.top
),它是固定的,另一个块(让我们称之为.content
),当滚动时,它会越过{ {1}},同时保留.top
包含可点击的所有内容。
现在有一些明显的设置
此 http://jsbin.com/rucifuzu/1/edit?html,css,output
或者这个 http://jsbin.com/hufomaxu/1/edit?html,css,output
两者的问题是:a)您必须考虑滚动条宽度b).top
上的滚动/滑动不会对其下方带有.top
的元素执行任何操作
我想过几个解决方案。
首先在overflow: auto
上pointer-events: none
,这会使鼠标事件变得“透明”,因此触发滚动的whavever就在它之下,问题在于点击事件无效,因为我计划在.top
内部提供可点击和可选择的内容,所以这是一个问题。我可以将.top
重置回pointer-events
只是为了那些点击/可选择的东西,但考虑到其中一个可点击的东西将是大屁股标题,我会遇到滚动无法使用鼠标的问题在它上面的位置。
第二个是我称之为滚动委托,使用JS我会捕捉mousewheel事件并更改auto
元素上的scrollTop。这样可以正常工作,除了它可能会导致不同的滚动“感觉”,而这个代理正在发生,而overflow: auto
上的本机滚动开始。在触摸设备上正确行为的屁股也很痛苦。 / p>
所以两者都不理想。我是否错过了这个问题的任何天才和简单的解决方案?
.content
元素可以点击并且“滚动通过”.top
是可点击的,但下的元素不会滚动 - http://jsbin.com/hufomaxu/1/edit?output .top
无法点击 - http://jsbin.com/tuluwili/1/edit?output 答案 0 :(得分:1)
不确定我100%理解 - 您想在滚动时直观地掩盖固定元素,但仍然可以点击它?
一个简单的解决方案可能是使用3层而不是2层。
底层包含您的链接并已修复。
中间层是滚动它并覆盖它的那个。
顶层是固定的,与底层相同,但清除所有背景颜色并将不透明度设置为0。
当你滚动它时,看起来底部被覆盖但你仍然可以点击顶部不可见的图层。
如果您需要执行诸如拖动复制文本或以其他方式与中间层进行交互等操作,则可能无效。