CSS 页面宽度100vw导致水平滚动问题处理

一、问题描述：

在页面布局中使用了

width: 100vw;

页面效果如下：

二、原因

如果元素设置为width：100vw;并且有一个垂直滚动条，元素的宽度将等于视口加上滚动条的宽度。

解决方案

<style>
   html {
            overflow-y: scroll;
        }

  :root {
            overflow-y: auto;
            overflow-x: hidden;
        }

  :root body {
            position: absolute;
            }

   body {
            width: 100vw;
            overflow: hidden;
        }
</style>

html和root伪类分别设置了overflow-y,主要为了了兼容IE8