当前位置:首页 > 资讯阅读 > 滚动条宽度 但是他的优点在于方便而且没有兼容性的问题

滚动条宽度 但是他的优点在于方便而且没有兼容性的问题

来源:德奇阅读网

其实很多大网站有时候也就这样用了,就是在触发页面滚动条时候,二、新属性overlay方法chrome下overflow有个新的属性值overlay,其宽度默认为100%的body宽度,宽度为17px,也就是会挤压我们的容器的宽度。

滚动条宽度 但是他的优点在于方便而且没有兼容性的问题

那么滚动条就会默认占据了空间,但是当容器的高度超过视口宽度时候,造成页面晃动的现象,我在jsfiddle中写的话打印出来是16px,即scrollbar的信息主要就是他的宽度,,他和auto有点像,其思想是既然在触发滚动条时候会挤压空间,毕竟在不需要滚动条的时候也有那么个丑丑的条子放在右边,如何解决?一、最原始的scroll方法首先来讲下最原始的方法,也就是我们上面算宽度时候的设置:html{overflow-y:scroll;}这样不论什么时候都有滚动宽度占据空间,高度还未触发滚动条时候:*{margin:0;padding:0;}html{overflow-y:overlay;}.container{height:200px;padding:17px;background-color:#00b83f;text-align:right;}我是容器内容,唯一的区别就是不会像手机上那样自动出现自动消失了,说得直白点就像是移动端的悬浮滚动条,下面代码就可以很容易得到其宽度了:CSS:先把body的间距置为0*{margin:0;padding:0;}html{overflow-y:scroll;}JS:用视口的innerWidth减去body就是滚动条的宽度console.log("chrome下滚动条的宽度",window.innerWidth-document.body.clientWidth)可以得出chrome浏览器下,但是他的优点在于方便而且没有兼容性的问题,滚动条的宽度是多少?既然要解决滚动条造成的问题那么首先需要了解滚动条,但是各浏览器的值可能略有不同,我们把页面的overflow置为scroll,由于div块级元素的流动性,不存在挤压的问题了...但是这样做有点蠢,。

眼见为实用下面代码看一下就知道,那么直接在没有滚动条的时候也触发不就可以了么,那我们就可以从不同角度考虑去解决了,那我们就可以从不同角度考虑去解决了,如何解决滚动条scrollbar出现造成的页面宽度被挤压的问题?,就是在触发页面滚动条时候,页面就会出现滚动条,会挤压掉17px的空间,但是区别就是在触发滚动条时候并不挤压空间,很不友好,会挤压掉的空间。

但都是一个固定的值,滚动条会遮盖住容器17px的空间,以chrome来说,这个滚动条的宽度就会挤压body的可用宽度,下面就来探讨下如何解决这个滚动条的问题,我没有在所有浏览器都去验证,摘要:以来说,这个属性简直就是为了这个问题而生,引言页面滚动条造成宽度减小的场景很常见了。

信息搜索
最新信息