请教油猴脚本：怎么把原来一个整体的页面划分成两个模块？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2876 天前的主题，其中的信息可能已经有所发展或是发生改变。

（腾讯云最新优惠活动来了：云产品限时1折，云服务器低至88元/年，点击这里立即抢购：9i0i.cn/qcloud，更有2860元代金券免费领取，付款直接抵现金用，点击这里立即领取：9i0i.cn/qcloudquan）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

起因：翻 ruby 在线文档页面时，希望左边那些导航标签能相对固定住，滚动 /跳转页面时只是右边内容部分动。比如这个页面： http://ruby-doc.org/core-2.3.1/Array.html 想划成左右两块，左边点击时右边跳动，而左右两边能独立的下拉滚动等。

请问这个能做到吗？烦请老司机带路，谢谢！

页面

猴脚本

滚动

Ruby

5 条回复 ? 2016-06-23 18:59:06 +08:00

hcwhan

2016-06-23 16:53:26 +08:00 via Android

css 固定定位

hcwhan

2016-06-23 16:55:15 +08:00 via Android

sorry 请无视我只看了标题，，

kokdemo

2016-06-23 17:08:39 +08:00

让左右两边 div 的 display 设置成 inline-block ， height 100vh （或者 100%）， overflow-y 写成 scroll

quix

2016-06-23 18:00:46 +08:00

左边改成 postion: fixed 内部加 overflow: auto, 右边不需要动

muzuiget

2016-06-23 18:59:06 +08:00

不谢

(function(cssText) {
var head = document.querySelector('head');
var style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.textContent = cssText;
head.appendChild(style);
})(`
.class #metadata, .file #metadata, .module #metadata {
float: left;
height: 100vh;
overflow: auto;
position: sticky;
top: 0;
width: 260px;`)

请教油猴脚本： 怎么把原来一个整体的页面划分成两个模块？

请教油猴脚本：怎么把原来一个整体的页面划分成两个模块？