一、为啥可以滚动

我们编写的页面在内容长度超过屏幕时，会自动通过滚动的方式进行展示，这是因为我们的body默认拥有滚动的属性overflow:scroll。

那么，如果在某种场景下使用了

 body {
    overflow: hidden;
}

你会发现整个世界都安静了。。。

二、各自滚——两列滚动

聪明的小伙伴，肯定SX才会如此对待body元素。
有时候不得不承认PM会有一些SX的需求，但是导致body无法滚动的需求还是可能出现的。

下面在body无法滚动的情况下，一起探索两列各自滚动布局的实现。

 <div style="overflow: scroll">
     警告：这里有很长很长的文字，长得根本没办法一屏显示完全。。。
</div>

实践出真知，这样做是不行的。

Try another：

<div style="overflow: scroll">
    <p>
        警告：这里有很长很长的文字，长得根本没办法一屏显示完全...
        重点：元素具有scroll属性时，它所包含的内容（标签）元素在无法    
             完全显示时，可以通过滚动的方式查看...
    </p>
</div>

核心已经完成了，两列滚动只需要再做一个水平布局就可以了，小伙伴们可以自由联系。
参考：

<div style="overflow: scroll; position: fixed; width: 30%; height:100%">
    <p>
        警告：我是左边很长很长的文字，长得根本没办法一屏显示完全...
        坑：一定要有高度哦，也可以是固定值哦～
    </p>
</div>
<div style="overflow: scroll; width: 70%; margin-left: 30%; height:100%">
    <p>
        警告：我是右边很长很长的文字，长得根本没办法一屏显示完全...
        坑：一定要有高度哦，也可以是固定值哦～
    </p>
</div>

Perfect？然而，并不是...

two_column.jpg

三、只滚不跳——去掉滚动条

前面的实现已经达到了需求的效果——两列各自滚。
但是在windows的chrome上出现非常浓重的两个滚动条，设计的美感瞬间没有了。（为啥mac上的chrome表现的很任性呢？）
接下来我们来探讨，怎样去掉视觉障碍——滚动条。

目前可以找到的最简单的方法，使用伪元素：

::-webkit-scrollbar{width:0px}

然而该方法只适用于webkit内核（chrome、safari），大家都很奇怪CSS在想什么？

然而布局的灵活性，总归是有聪明的小伙伴找到了方案——覆盖，即用其他的区域盖住滚动条。

现在就去掉中间那个显眼的滚动条：

<div style="overflow: hidden; position: fixed; width: 30%; height:100%">
<div style="overflow: scroll; position: fixed; width: calc(30% + 20px); height: 100%">
    <p>
        警告：我是左边很长很长的文字，长得根本没办法一屏显示完全...
        坑：一定要有高度哦，也可以是固定值哦～
    </p>
</div>
<div style="overflow: scroll; width: 70%; height: 100%; margin-left: 30%">
    <p>
        警告：我是右边很长很长的文字，长得根本没办法一屏显示完全...
        坑：一定要有高度哦，也可以是固定值哦～
    </p>
</div>

OVER，效果完美。