浏览器滚动条及其影响 calc()

1.浏览器滚动条

默认风格各异，推荐一插件 mCustomScrollbar

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style>
    #scroll {
      width: 200px;
      height: 200px;
      overflow: auto;
      margin-bottom: 20px;
    }

    #scroll div {
      width: 400px;
      height: 400px;
    }

    #scroll::-webkit-scrollbar {
      /*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/
      width: 10px;
      height: 10px;
    }

    #scroll::-webkit-scrollbar-button {
      /*滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置2）*/
      background: #74D334;
    }

    #scroll::-webkit-scrollbar-track {
      /*外层轨道，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置3）*/
      background: #FF66D5;
    }

    #scroll::-webkit-scrollbar-track-piece {
      /*内层轨道，滚动条中间部分（位置4）*/
      background: #f00;
    }

    #scroll::-webkit-scrollbar-thumb {
      /*滚动条里面可以拖动的那部分（位置5）*/
      background: #FFA711;
      border-radius: 4px;
    }

    #scroll::-webkit-scrollbar-corner {
      /*边角（位置6）*/
      background: #82AFFF;
    }

    #scroll::-webkit-scrollbar-resizer {
      /*定义右下角拖动块的样式（位置7）*/
      background: #FF0BEE;
    }

    #scroll {
      scrollbar-arrow-color: #f4ae21;
      /**/
      /*三角箭头的颜色*/
      scrollbar-face-color: #333;
      /**/
      /*立体滚动条的颜色*/
      scrollbar-3dlight-color: #666;
      /**/
      /*立体滚动条亮边的颜色*/
      scrollbar-highlight-color: #666;
      /**/
      /*滚动条空白部分的颜色*/
      scrollbar-shadow-color: #999;
      /**/
      /*立体滚动条阴影的颜色*/
      scrollbar-darkshadow-color: #666;
      /**/
      /*立体滚动条强阴影的颜色*/
      scrollbar-track-color: #666;
      /**/
      /*立体滚动条背景颜色*/
      scrollbar-base-color: #f8f8f8;
      /**/
      /*滚动条的基本颜色*/

    }
  </style>
</head>

<body>

  <div id='scroll'>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ex quia ab aliquid facere architecto culpa
        dolorum fugit corrupti harum accusantium quisquam inventore et magnam itaque minima hic! Impedit error.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum incidunt quia ipsam totam tenetur maxime
        repellendus possimus debitis molestiae velit vel fugiat ullam excepturi est quisquam quo fugit culpa amet.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur facilis ipsam iste repellat sint numquam
        explicabo voluptatum voluptate corporis fugit adipisci qui exercitationem corrupti debitis tempore omnis maxime
        at quidem!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto voluptatem dolores ab dolorem est itaque
        ut sit deserunt qui laudantium eaque vitae perspiciatis amet quasi unde inventore dolor quis. Natus!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quia doloremque blanditiis quas unde nostrum a
        voluptatibus quam perspiciatis non quaerat enim neque quos rerum quo dolor expedita error deserunt!</p>
    </div>
  </div>
</body>

</html>

View Code

2.影响

以垂直方向为例，当内容变化的时候，如果设置的是overflow：auto，则可能出现滚动条有无场景切换，俗称内容‘’闪动‘’。

此‘闪动’，轻则内容晃动，重则影响到其他参数获取（比如你用一个插件，要获取一个通过百分比设置宽度的容器宽度，那么，你获取的值是不稳定的，所以，基于此宽度计算的其后一切都存在问题）

解决方式一：设置overflow：scroll，也就是说不管内容有没有超出，右侧会有个滚动条（彻底消除滚动条出现影响），功能没问题就是影响美观，当然，如果内容必然超出，那影响忽略。

解决方式二：高版本浏览器支持的css3（原理就是通过获取到的容器内部包括滚动条的宽度减去可用宽度得到滚动条宽度，设置此宽度为一个间距，抵消可能出现的滚动条即可）

.wrap { margin-left: calc(100vw - 100%); }

或者.wrap { padding-left: calc(100vw - 100%); }

3. calc() 动态计算长度值

需要注意的是，运算符前后都需要保留一个空格，例如： calc(100% - 10px)；