javascript - 在 youtube 页面中放置两个不同的滚动条以改进自定义 UI 体验

Question

目标:当我们在浏览器上滚动 youtube 时，整个页面向下滚动，我想创建两个滚动器:

1. 留下一个用于视频和评论滚动。
2. 右边的一个用于下一个(推荐的视频)滚动。

我发现我们可以使用 overflow: scroll; shown in this JSfiddle 来做到这一点

例如:Sample Youtube video

如果您检查这些是两列:

但是，当我在那里应用样式属性时(溢出:滚动)。它没有应用。

由于它是一个动态页面，我想制作一个 chrome 扩展来完成这项工作，但我不知道如何开始？

更新 : 本地->

在实时页面中无法通过剪切粘贴工作:

Answer 1

我根据 YouTube 页面的 DOM 结构制作了一个 JSfiddle。我用一些随机图像模拟了动态加载内容。

基本上 YouTube 在 body 元素上有一个 overflow-y: scroll。因此，当您尝试向 body 的任何子级添加 overflow-y: scroll 时，技术上没有内容溢出，因为 body 具有已经处理过了

所以第一步是阻止 body 溢出。为此，您可以在 body 上设置 overflow-y: hidden。接下来您会注意到列上仍然没有滚动。这是因为列的高度正在扩展以适应动态加载的内容。所以你需要强制两列有一个固定的高度。那么当动态添加的内容超过高度时，就会溢出，出现滚动条。要固定高度，您可以显式设置 #primary/#secondary 或父级 #columns 或任何向上的祖先节点的高度树，只继承高度。

无论如何，这些是 fiddle :Before和 After .

更新:将 youtube 评论添加到 #secondary 列。