在 YouTube 页面中放置两个不同的滚动条以改进自定义 UI 体验
Putting two different scroller in a youtube page to make improved custom UI experience
目的：当我们在浏览器上滚动youtube时，整个页面向下滚动，我想创建两个滚动器：
- 左一个用于视频和评论滚动。
- 右边一个用于下一个（推荐的视频）滚动。
我发现我们可以用 overflow: scroll;shown in this JSfiddle
举个例子：Sample Youtube video
如果您检查这些是两列：
但是，当我在那里应用样式 属性 时（溢出：滚动）。未应用。
由于它是一个动态页面，我想制作一个 chrome 扩展来完成这项工作，但我不知道如何开始？
更新 : 本地->
无法通过实时页面中的剪切粘贴工作：
我根据 YouTube 页面的 DOM 结构制作了一个 JSfiddle。我用一些随机图像模拟了动态加载内容。
基本上 YouTube 在 body 元素上有一个 overflow-y: scroll。因此，当您尝试将 overflow-y: scroll 添加到 body 的任何 children 时，技术上没有内容溢出，因为 body 已经处理了它。
所以第一步是阻止 body 溢出。为此，您可以在 body 上设置 overflow-y: hidden。接下来您会注意到列上仍然没有滚动。这是因为列的高度正在扩展以适应动态加载的内容。所以你需要强制两列有一个固定的高度。那么当动态添加的内容超过高度时，就会溢出，出现滚动条。要固定高度，您可以显式设置 #primary/#secondary 或 parent #columns 的高度，或树上的任何祖先节点并继承高度。
更新： 将 YouTube 评论添加到 #secondary 列。
目的：当我们在浏览器上滚动youtube时，整个页面向下滚动，我想创建两个滚动器：
- 左一个用于视频和评论滚动。
- 右边一个用于下一个（推荐的视频）滚动。
我发现我们可以用 overflow: scroll;shown in this JSfiddle
举个例子：Sample Youtube video
如果您检查这些是两列：
但是，当我在那里应用样式 属性 时（溢出：滚动）。未应用。
由于它是一个动态页面，我想制作一个 chrome 扩展来完成这项工作，但我不知道如何开始？
更新 : 本地->
无法通过实时页面中的剪切粘贴工作：
我根据 YouTube 页面的 DOM 结构制作了一个 JSfiddle。我用一些随机图像模拟了动态加载内容。
基本上 YouTube 在 body 元素上有一个 overflow-y: scroll。因此，当您尝试将 overflow-y: scroll 添加到 body 的任何 children 时，技术上没有内容溢出，因为 body 已经处理了它。
所以第一步是阻止 body 溢出。为此，您可以在 body 上设置 overflow-y: hidden。接下来您会注意到列上仍然没有滚动。这是因为列的高度正在扩展以适应动态加载的内容。所以你需要强制两列有一个固定的高度。那么当动态添加的内容超过高度时，就会溢出，出现滚动条。要固定高度，您可以显式设置 #primary/#secondary 或 parent #columns 的高度，或树上的任何祖先节点并继承高度。
更新： 将 YouTube 评论添加到 #secondary 列。
