来滚——你不知道的scroll～

今天来和大家一起学习页面的滚动，介绍几种常用滚动场景的处理方式，以及平时可能会遇到的一些小坑。

一、为啥可以滚动

我们编写的页面在内容长度超过屏幕时，会自动通过滚动的方式进行展示，这是因为我们的body默认拥有滚动的属性overflow: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、更多精彩，期待你的参与～