写页面时遇到的一些问题及总结（overflow和粘性定位）

这周在模仿仿写华为官网页面时发现了一些不会的问题，查查百度，或者问问学长后才恍然大悟(＾－＾)V。

overflow

众所周知，overflow最常用的就是overflow：hidden，再搭配上text-overflow：ecllipsis以及white-space：no-wrap，就能让多字体隐藏变成点点点，但其实它还有很多用法，首先，它的另一大用法就时添加滚动条，当使用overflow：auto，若这个div内的东西超出这个div的固定长度（宽度）时就会出现滚动条，从而达到局部 滚动的效果，以下是overflow的全部用法

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

scroll是一开始就会有滚动条，不管东西多没多，但没超过时没有滚动条里面的小滚动条，而auto时当超过时才出现滚动条，所以一般auto用的比较多，并且body的overflow起始属性也是auto

也就是说我们可以更改body的overflow属性值让页面没有滚动条，从而达到固定页面的效果

document.body.style.overflow='hidden';

但别忘了固定后再关闭要把它恢复

document.body.style.overflow='';

        粘性定位

        这个玩意大家可能不经常用（反正我是没用过），因为他跟fixed定位类似，也可以将元素定位到固定位置，所以大家都常用fixed，但是它还有另一种用法，来实现一个滚动折叠的效果

html

<div class="hid_More">
            <div class="hid_Nav">手机</div>
            <div class="hid_Nav">笔记本/平板</div>
            <div class="hid_Nav">手表手环</div>
            <div class="hid_Nav">耳机音箱</div>
            <div class="hid_Nav">智慧屏</div>
            <div class="hid_Nav">智能路由</div>
            <div class="hid_Nav">华为智选</div>
            <div class="hid_Nav">企业购</div>
            <div class="hid_Nav">个人中心</div>
        </div>

css

.hid_More{
    width: 100%;
    height: 253px;
    position: relative;
    overflow-y: auto;
}
.hid_Nav{
    padding: 10px 0;
    border-bottom: 1.5px solid $myHui;
    position: sticky;
    top: 0;
    background-color: $myWhite;
}

就可以实现这种效果

 具体原理为：

当你把每个元素都设置成粘性定位，并且top：0；时他们就都会在top：0；的位置粘性定位，就相当于被固定在那了，而下面的元素上来时，也是在这个位置粘性定位，所以他就也会固定在此，并且把前一个元素盖住，就可以实现这种效果啦。吐槽两句华为官网，这页面变得真快。。。一天一个样，而且话说你放大后的轮播图为啥就滚动一次啊。。。