如何解决因滚动条的出现导致页面宽度被挤压的问题？
时间：2023-03-30 17:23:42
CSS
介绍页面滚动条导致宽度变小是很常见的问题。由于div块级元素的流动性，其宽度默认为body宽度的100%，但是当容器的高度超过视口的宽度时，页面就会出现滚动条，滚动条会挤压body可用的宽度，也就是挤压我们容器的宽度，导致页面晃动，非常不友好。让我们讨论如何解决这个滚动条问题。滚动条的宽度是多少？既然我们要解决滚动条带来的问题，那么我们首先要了解滚动条，即滚动条的信息主要是它的宽度。如果我们将页面的溢出设置为滚动，那么滚动条会默认占满空间。下面的代码可以很容易的得到它的宽度：CSS:首先设置body的间距为0*{margin:0;padding:0;}html{overflow-y:scroll;}JS:viewport的innerWidth减去body得到滚动条的宽度console.log('chrome下滚动条的宽度',window.innerWidth-document.body.clientWidth)可以得到，在chrome浏览器下，宽度为17px，而我在jsfiddle中写的打印字为16px。所有浏览器都去验证，但每个浏览器的值可能略有不同，但都是固定值。以chrome为例，当页面滚动条被触发时，17px的空间会被挤压，所以我们可以从不同的角度考虑来解决。怎么解决？1.最原始的scroll方法首先说说最原始的方法。思路是既然触发滚动条的时候空间会被挤压，那在没有滚动条的时候是不是可以直接触发，也就是我们上面计算宽度时的设置：html{overflow-y:scroll;}这样滚动宽度随时占空间，不存在挤压的问题。。。但是这个有点傻，毕竟不需要滚动条的时候还有这么难看的注解正确的。但它的优点是方便，没有兼容性问题。事实上，很多大型网站有时也是这样使用的。..2.chromeoverflow下的新属性叠加方式有新的属性值叠加。这个属性就是为这个问题而生的。有点类似于auto，不同的是触发滚动条时不会挤压空间。说白了白点就像是移动端的浮动滚动条。唯一不同的是，它不会像手机上那样自动出现和消失。滚动条将覆盖容器的17px空间。眼见为实。看看下面的代码就知道了。当高度还没有触发滚动条时：*{margin:0;padding:0;}html{overflow-y:overlay;}.container{height:200px;填充：17px；背景色：#00b83f；text-align:right;我是容器的内容
效果图如下：然后修改容器的高度来触发滚动条：.container{height:2000px;填充：17px；背景色：#00b83f；text-align:right;}效果图如下：可以看到虽然出现了滚动条，但是并没有挤压容器的宽度，而是覆盖了17px的空间，本质上相当于实现了滚动条的表现在移动端。但遗憾的是，这个属性值目前只有chrome支持。如果ff/ie都支持，后面就不用写了，不过据说以后会加进去支持。可以说是非常好用了。实现这种效果的方法。3、用vw和calc来实现，因为100vw是窗口的宽度，其实就是window.innerWidth，容器的宽度除滚动条可用宽度外都是100%，所以calc(100%-100vw)当没有滚动条时为0。当滚动条被触发时，它的值是负滚动条的宽度。我们将它分配给容器的margin-right，它可以巧妙地补偿这个宽度的挤压。当滚动条存在时，容器宽度仍然占据整个视口的宽度。.*{保证金：0；padding:0;}html{overflow-y:auto;overflow-x:hidden;}.container{height:2000px;右边距：计算（100%-100vw）；填充：17px；背景色：#00b83f；text-align:right;}效果和第二种方法一样，完美，兼容性也不错，至少ie和ff的高版本没问题。4、复制张新旭老师的absolute方法链接在这里。此方法使用绝对定位来确保主体的宽度保持不变。html{溢出-y:滚动;//这是为了兼容ie8，不支持:root,vw}:root{overflow-y:auto;overflow-x:hidden;}:rootbody{position:absolute;}body{width:100vw;overflow:hidden;}在普通容器中滚动条被挤压怎么办？上面是浏览器视口的滚动条解决方案，但是如果在普通的div容器中有这样的需求怎么办？因此，此时并没有像100vw这样的值可以直接获取容器的宽度。只能用js的方式去检测计算，然后用margin-right来补偿。原理是一样的，但是我强烈不推荐也不喜欢用js来计算布局...所以这种情况下，我勉强用了上面的第一种方法，如果是chrome下就用第二种方法。.wrap{溢出-y:滚动;overflow-y:overlay;}当然如果实在受不了也可以用js算一下...本质是一样的，这里放个链接供参考。总结的方法主要是以上几种。您可以根据自己的需要自由选择。最重要的是在使用一些新属性的时候要多思考。很多问题的本质是没有区别的，只是用新的工具去做而已。参考文献在文中
