用js改变视频网站布局
本帖最后由 wwwwwllllk 于 2023-3-11 09:49 编辑> 本帖最后由 wwwwwllllk 于 2023-3-5 14:45 编辑
我只能说太酸爽了(针对某些没有弹幕，想看评论但是一看评论视频就看不见的情况)
突然想到了解决方法。
# 实现方法
1.其实我们视频的网站布局都是很简单的，无非就是视频，评论，推荐三部分组成，所以它的布局我们即使写脚本也好操作
2.我们打开控制台以后这里元素的div你鼠标长按是可以拖动的，你可以把他放到你想要的位置。
3.然后我们再稍微设置点样式即可成功。
懒得写脚本，因为我也不经常看。所以我写下每次打开需要进行的步骤
!(data/attachment/forum/202303/05/142431umna875emnx8fy2w.png)
b站更简单，直接拖过来就可以了都不需要改。
!(data/attachment/forum/202303/05/143216s0m11f22hl0c37vb.png)
让视频固定到一个位置不进行滚动的方法
网站我针对指定盒子只需要
```
position: sticky;
top: 100px;
```
这是案例(3种方案)
```
.header {
position: sticky;
top: 0;
background-color: #fff;
padding: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
```
方法2：使用position: fixed;
将您想要固定的元素的CSS position属性设置为 fixed，并将其 top 和 left 属性设置为您想要它停留的位置。这种方法会将元素从文档流中移除，因此您可能需要调整其他元素的位置以避免重叠。
例如，如果您想要一个具有固定导航栏的网站，您可以这样设置CSS：
```
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: #fff;
padding: 10px;
}
```
方法3：使用overflow: auto;
将您想要滚动的元素的CSS overflow属性设置为 auto。这将使元素具有滚动条，并且在内容滚动时保持在相对位置。
例如，如果您想要一个具有滚动内容的固定侧边栏，您可以这样设置CSS：
```
.sidebar {
width: 200px;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #f8f8f8;
overflow: auto;
padding: 10px;
}
```
脚本已写：https://scriptcat.org/script-show-page/889
页:
[1]