创建无缝嵌套滚动翻转

Question

我试图创建一系列窗口大小的div,内部div可变大小>窗口大小.问题是它需要滚动,好像没有嵌套的div.

总之我想要这个:

css{
     block{ height:100wh; }
     innerBlockSmall{ height:100wh; }
     innerBlockLarge{ height:200wh; }
}


<div class="block">
    <div class="innerBlockLarge"></div>
</div>
<div class="block">
    <div class="innerBlockSmall"></div>
</div>

https://jsfiddle.net/cbuh8psd/

像这样行事

css{
     innerBlockSmall{ height:100wh; }
     innerBlockLarge{ height:200wh; }
}

    <div class="innerBlockLarge"></div>
    <div class="innerBlockSmall"></div>

https://jsfiddle.net/t6zrvo7u/1/

不幸的是,滚动"焦点"是通过hover可滚动元素触发的.在这种情况下,这是一种不良行为.

我目前知道有两种可能的解决方案.

1. 手动通过javascript分配滚动"焦点". (最佳)

2. 完全覆盖默认HTML滚动javascript,例如库ISCROLL5.
   (好吧,如果性能影响很小)

不幸的是,通过查看developer.mozilla的HTML5文档后,我没有遇到任何通过javascript"聚焦"滚动到元素的方法.

至于选项2:ISCROLL5在超过15-20个滚动div时受到了不良影响.

我希望我在这里遗漏一些东西,任何解决方案,修复或建议都会非常感激.

Answer 1

我不知道你为什么要这样做，但我能想到实现你想要的效果的唯一方法是沿着重新创建滚动条的路线，但好消息是，这不需要以失去你的类似原生的体验。

遗憾的是，我不记得我编写此代码的项目，尽管实现此目的的一种方法是使自己成为一个滚动条组件。这个滚动条组件确实会提供一个假滚动条，但提供一个类似本机的界面。那么，你该怎么做呢？

1. 您可以通过计算带有 和不带有 的元素之间的差异来确定滚动条的宽度overflow: scroll。让这成为scrollWidth
2. 您创建一个<div>宽度overflow: auto，scrollWidth并将position: fixed其放置在身体的右侧。让scrollTop财产成为scrollPosition。
3. 在元素内部添加另一个<div>宽度0（这至少在 Chrome 中有效，检查其他浏览器是否以不同方式对待它）并让高度为documentLength。
4. documentLength现在，您可以通过设置和scrollPosition任何您希望的方式完全控制滚动条。在您的情况下，您将设置documentLength为每个元素的组合滚动高度并scrollPosition基于scrollTop这些节点中的相对值。

可以在此jsfiddle中找到该概念（而不是实现）的非常基本的演示（请注意，在本例中width滚动条的 是固定的20px，并且没有任何动态代码）。