总之我想要这个：
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/
不幸的是,滚动“Focus”是通过将鼠标悬停在可滚动元素上来触发的.在这种情况下,这是一种不良行为.
目前有两种可能的解决方案.
>通过javascript手动分配滚动“焦点”. (最佳)
>完全覆盖默认的HTML滚动javascript,for
例如库ISCROLL5.
(好的,如果性能很小)
不幸的是,在浏览developer.mozilla的HTML5文档之后,我没有通过任何方式“通过javascript滚动到元素”.
对于选项2：ISCROLL5在超过〜15-20滚动div时遇到不良的性能.
我希望我在这里遗漏一些东西,任何解决方案,修复或建议将不胜感激.
解决方法
可悲的是,我不记得我编写这个代码的项目,虽然实现这一点的一个方法是使自己成为一个滚动条组件.这个滚动条组件确实会提供一个假的滚动条,但是提供一个本机的接口.那么你该怎么做呢？
>通过读取带有和不带有溢出的元素之间的差异来确定滚动条的宽度：scroll.让它是scrollWidth
>您创建一个< div>带溢出：自动宽度scrollWidth和位置：固定在身体右侧的适当位置.让scrollTop属性为scrollPosition.
>在元素内添加另一个< div>宽度为0(至少在Chrome中可以使用,检查其他浏览器是否处理不同),并将height设置为documentLength.
>现在,您可以通过以任何方式设置documentLength和scrollPosition来完全控制滚动条.在您的情况下,您将根据这些节点中的相对scrollTop将documentLength设置为每个元素和scrollPosition的组合scrollHeights.
在这个jsfiddle中可以找到一个非常基本的概念演示(不是实现)(注意,在这种情况下,滚动条的宽度固定为20像素,并且没有动态代码).
