从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇“web前端奇怪的水平滚动条问题怎么解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“web前端奇怪的水平滚动条问题怎么解决”文章吧。
成都创新互联提供网站建设、网站制作、网页设计,品牌网站设计,广告投放等致力于企业网站建设与公司网站制作,十多年的网站开发和建站经验,助力企业信息化建设,成功案例突破成百上千,是您实现网站建设的好选择.
今天改一个前端同学的样式代码,发现了一个奇怪的问题.大概是这样:
我的视窗宽度是1920px,滚动容器宽度1903px,然后还出现了水平滚动条,匪夷所思。由于文件嵌套太深,查找起来非常耗时,因此就求助于全局函数,是谁触发了滚动条的操作。于是就有了以下代码
function findScroller(element) {
element.onscroll = function() { console.log(element)}
Array.from(element.children).forEach(findScroller);
}
findScroller(document.body);
打印出的对象是 ,。这就不明白了。 明明元素离body还很远,也没有元素超宽,这个滚动条到底从哪儿来?
这并不是标准答案
非常难过,一个技能不行就要求助第二个方式 —— 删代码。 一行一行的删,然后将他转为基础元素,比如自定义的模型,直接替换成一个div,然后添加样式,再删除无用的代码,这样就做出来了一个简易模型。
经过观察发现, 如果元素没有超高,那么元素也不会出现横向滚动的问题,如果元素超高,则就会同时出现垂直和水平两个滚动条。
更迷惑了。
所以,我倒过来分析,发现,这个超高元素的宽度虽然没有超过视窗宽度,为1903px
,但是,PC下浏览器滚动条默认宽度为17px
,且此垂直滚动条是在body
下的, 和上文的打印对象吻合。由此可知:
当容器出现滚动条后, 产生滚动条元素的可用水平宽度 = 原始宽度- 17px。
一定有子元素设置的宽度 > 原始宽度- 17px ,且为有效像素单位 px,em ,rem, vw等
子元素设置的宽度 = 原始宽度
这么一来就可知, 如果有body下的子元素的宽度设置为 1920px或者 100vw 或者等于100wv的任意一项,即可出现,此出现横向滚动条的现象。
经过老师傅的一顿操作,终于发现了一个设置样式不合理的问题。由此我简化了模型代码如下:
超宽导致元素溢出滚动条
由此, 写代码时需要不断分析,css样式一定要有迹可循,切不可随意添加。导致异常出现时费心费力。
以上就是关于“web前端奇怪的水平滚动条问题怎么解决”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图