来滚——你不知道的scroll～来滚—

今天来和大家一起学习页面的滚动，介绍几种常用滚动场景的处理方式，以及平时可能会遇到的一些小坑。
一、为啥可以滚动我们编写的页面在内容长度超过屏幕时，会自动通过滚动的方式进行展示，这是因为我们的body默认拥有滚动的属性overflow:scroll。
【来滚——你不知道的scroll～】那么，如果在某种场景下使用了

body { overflow: hidden; }

你会发现整个世界都安静了。。。
二、各自滚——两列滚动聪明的小伙伴，肯定SX才会如此对待body元素。
有时候不得不承认PM会有一些SX的需求，但是导致body无法滚动的需求还是可能出现的。
下面在body无法滚动的情况下，一起探索两列各自滚动布局的实现。

警告：这里有很长很长的文字，长得根本没办法一屏显示完全。。。

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

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

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

警告：我是左边很长很长的文字，长得根本没办法一屏显示完全... 坑：一定要有高度哦，也可以是固定值哦～警告：我是右边很长很长的文字，长得根本没办法一屏显示完全... 坑：一定要有高度哦，也可以是固定值哦～

Perfect？然而，并不是...

two_column.jpg 三、只滚不跳——去掉滚动条前面的实现已经达到了需求的效果——两列各自滚。
但是在windows的chrome上出现非常浓重的两个滚动条，设计的美感瞬间没有了。（为啥mac上的chrome表现的很任性呢？）
接下来我们来探讨，怎样去掉视觉障碍——滚动条。
目前可以找到的最简单的方法，使用伪元素：

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

然而该方法只适用于webkit内核（chrome、safari），大家都很奇怪CSS在想什么？
然而布局的灵活性，总归是有聪明的小伙伴找到了方案——覆盖，即用其他的区域盖住滚动条。
现在就去掉中间那个显眼的滚动条：

警告：我是左边很长很长的文字，长得根本没办法一屏显示完全... 坑：一定要有高度哦，也可以是固定值哦～警告：我是右边很长很长的文字，长得根本没办法一屏显示完全... 坑：一定要有高度哦，也可以是固定值哦～

OVER，效果完美。

文章图片
no_scroll_bar.jpg
需要补充的两点：
1、在具体使用时可以调整内容元素的padding适配显示效果；
2、这里默认滚动条的宽度为20px，在实际使用中可以尽量大一点；
四、这里是评论区，欢迎写下你的坑 1、ios移动设备滑动艰难
-webkit-overflow-scrolling: touch;
2、更多精彩，期待你的参与～