Javascript 创建无缝嵌套滚动

我正在尝试创建一系列窗口大小的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>

css{
块{高度：100wh；}
innerBlockSmall{高度：100wh；}
innerBlockLarge{高度：200wh；}
}

像这样行事

css{
innerBlockSmall{高度：100wh；}
innerBlockLarge{高度：200wh；}
}

不幸的是，将鼠标悬停在可滚动元素上会触发滚动“焦点”。在这种情况下，这是一种不受欢迎的行为

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

通过javascript手动分配滚动“焦点”。（最佳）

完全覆盖默认的HTML滚动javascript，例如 示例库ISCROLL5。
（如果性能命中很小，则为ok）

不幸的是，在浏览了developer.mozilla的HTML5文档之后，我还没有找到任何通过javascript“聚焦”滚动到元素的方法

至于选项2:ISCROLL5的滚动div超过了15-20个，性能受到了不良影响

我希望我在这里遗漏了一些东西，任何解决方案、修复或建议都将不胜感激。

我不知道您为什么希望这样做，但我能想到的实现您想要的效果的唯一方法是重新创建滚动条，然而，好消息是，这不需要以失去本土经验为代价

遗憾的是，我记不起我写这段代码的项目了，尽管实现这一点的一种方法是让自己成为一个滚动条组件。这个滚动条组件确实提供了一个假的滚动条，但提供了一个与本机类似的接口。那么，你是如何做到这一点的

您可以通过获取有溢出和无溢出的元素之间的差值来确定滚动条的宽度：scroll。设为

scrollWidth

您可以创建一个

，其

溢出：自动
宽度
滚动宽度
和
位置：固定
位于车身右侧。将
scrollTop
属性设置为
scrollPosition

在元素内部添加另一个宽度为0的

（这至少在Chrome中有效，请检查其他浏览器是否对此有不同的处理方式），并将高度设为

documentLength

现在，您可以通过任意方式设置

documentLength

和

scrollPosition

来完全控制滚动条。在您的情况下，您可以将

documentLength

设置为每个元素的组合滚动高度，并根据这些节点中的相对

scrollPosition

---

这是一个非常基本的概念演示（不是实现）（注意，在这种情况下，滚动条的

宽度固定为
20px
，没有任何动态代码）.
此解决方案允许滚动整个文档，同时保留使用鼠标滚动每个嵌套div的可能性。我希望我理解正确

这只是一个概念，它不会阻止嵌套元素随窗口滚动。但这是可以改进的


Array.prototype.slice.call（document.getElementsByClassName（'sbRemover'））
.forEach（职能（部门）{
var scroll=0，
mousedown=false，
mouseBtnHandler=函数（e）{
mousedown=e.type==“mousedown”；
}
div.addEventListener（'scroll'，函数（e）{
//更改div的滚动顶部。向下滚动时为负数
var diff=scroll-e.target.scrollTop；
//保存新的滚动值，以便以后与之比较
scroll=e.target.scrollTop；
//拖动滚动条滚动div时不执行任何操作
如果（！mousedown）{
//将窗口滚动到与滚动div相同的像素量
scrollTo（window.pageXOffset，window.pageYOffset-diff）；
}
});
div.addEventListener（'mouseup'，mouseBtnHandler）；
div.addEventListener（'mousedown'，mouseBtnHandler）；
});
body，div{
保证金：0；
填充：0；
}
.街区{
位置：相对位置；
宽度：100vw；
高度：100vh；
溢出：隐藏；
z指数：1；
不透明度：100；
}
斯伯雷莫先生{
宽度：100%；
身高：100%；
右侧填充：15px；
溢出：自动；
}
.大容量{
高度：225vh；
}
.smallContent{
高度：100vh；
}

从
中删除
溢出：auto
。sbRemover
禁用悬停时的滚动。遗憾的是，这种行为并不那么简单。删除
溢出：auto
会导致元素根本不滚动。所需的行为是嵌套的
滚动到
滚动，就像它们没有嵌套一样。有关所需的详细信息，请参见第二张JS小提琴behavior@DigitalDouble谢谢你的快速回复。任何和所有的建议都是有帮助的。我没有完全理解，我的英语不太好：）。div不能滚动？而是溢出：自动使用溢出：隐藏？
css{
     innerBlockSmall{ height:100wh; }
     innerBlockLarge{ height:200wh; }
}

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