亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

如何解決滾動(dòng)條scrollbar出現(xiàn)造成的頁面寬度被擠壓的問題？

scq000 / 2828人閱讀

摘要：以來說，就是在觸發(fā)頁面滾動(dòng)條時(shí)候，會(huì)擠壓掉的空間，那我們就可以從不同角度考慮去解決了。

引言

頁面滾動(dòng)條造成寬度減小的場景很常見了，由于div塊級(jí)元素的流動(dòng)性，其寬度默認(rèn)為100%的body寬度，但是當(dāng)容器的高度超過視口寬度時(shí)候，頁面就會(huì)出現(xiàn)滾動(dòng)條，這個(gè)滾動(dòng)條的寬度就會(huì)擠壓body的可用寬度，也就是會(huì)擠壓我們的容器的寬度，造成頁面晃動(dòng)的現(xiàn)象，很不友好，下面就來探討下如何解決這個(gè)滾動(dòng)條的問題。

滾動(dòng)條的寬度是多少？

既然要解決滾動(dòng)條造成的問題那么首先需要了解滾動(dòng)條，即scrollbar的信息主要就是他的寬度，我們把頁面的overflow置為scroll，那么滾動(dòng)條就會(huì)默認(rèn)占據(jù)了空間，下面代碼就可以很容易得到其寬度了：

CSS: 先把body的間距置為0

* {
  margin: 0;
  padding: 0;
}
html {
  overflow-y: scroll;
}

JS: 用視口的innerWidth減去body就是滾動(dòng)條的寬度

console.log("chrome下滾動(dòng)條的寬度", window.innerWidth - document.body.clientWidth)

可以得出chrome瀏覽器下，寬度為17px，我在jsfiddle中寫的話打印出來是16px，我沒有在所有瀏覽器都去驗(yàn)證，但是各瀏覽器的值可能略有不同，但都是一個(gè)固定的值。以chrome來說，就是在觸發(fā)頁面滾動(dòng)條時(shí)候，會(huì)擠壓掉17px的空間，那我們就可以從不同角度考慮去解決了。

如何解決？ 一、最原始的scroll方法

首先來講下最原始的方法，其思想是既然在觸發(fā)滾動(dòng)條時(shí)候會(huì)擠壓空間，那么直接在沒有滾動(dòng)條的時(shí)候也觸發(fā)不就可以了么，也就是我們上面算寬度時(shí)候的設(shè)置：

html {
  overflow-y: scroll;
}

這樣不論什么時(shí)候都有滾動(dòng)寬度占據(jù)空間，不存在擠壓的問題了...但是這樣做有點(diǎn)蠢，畢竟在不需要滾動(dòng)條的時(shí)候也有那么個(gè)丑丑的條子放在右邊。但是他的優(yōu)點(diǎn)在于方便而且沒有兼容性的問題，其實(shí)很多大網(wǎng)站有時(shí)候也就這樣用了。。。

二、新屬性overlay方法

chrome下overflow有個(gè)新的屬性值overlay，這個(gè)屬性簡直就是為了這個(gè)問題而生，他和auto有點(diǎn)像，但是區(qū)別就是在觸發(fā)滾動(dòng)條時(shí)候并不擠壓空間，說得直白點(diǎn)就像是移動(dòng)端的懸浮滾動(dòng)條，唯一的區(qū)別就是不會(huì)像手機(jī)上那樣自動(dòng)出現(xiàn)自動(dòng)消失了，滾動(dòng)條會(huì)遮蓋住容器17px的空間。眼見為實(shí)用下面代碼看一下就知道。
高度還未觸發(fā)滾動(dòng)條時(shí)候：

* {
  margin: 0;
  padding: 0;
}
html {
  overflow-y: overlay;
}
.container {
  height: 200px;
  padding: 17px;
  background-color: #00b83f;
  text-align: right;
}




  
我是容器內(nèi)容

效果圖如下：

然后修改容器高度，觸發(fā)滾動(dòng)條：

.container {
  height: 2000px;
  padding: 17px;
  background-color: #00b83f;
  text-align: right;
}

效果圖如下：

可以看到雖然出現(xiàn)了滾動(dòng)條但是并未擠壓容器的寬度，而是遮住了17px的空間，其實(shí)本質(zhì)上就相當(dāng)于實(shí)現(xiàn)了移動(dòng)端的滾動(dòng)條表現(xiàn)。
但是非常遺憾，這個(gè)屬性值目前只有chrome支持，要是ff/ie都支持，后面也就不用寫了，但是據(jù)說以后都會(huì)加上去支持的，可以說是非常好用了，后面的方法也只是用其他方法實(shí)現(xiàn)這個(gè)效果而已。

三、利用vw和calc實(shí)現(xiàn)

因?yàn)?00vw是window的寬度，其實(shí)就是window.innerWidth, 而容器的寬度100%就是除了滾動(dòng)條的可用寬度，因此在沒有滾動(dòng)條時(shí)候calc(100% - 100vw)就是0，觸發(fā)滾動(dòng)條時(shí)候其值為負(fù)的滾動(dòng)條寬度，我們將其賦值給容器的margin-right，即可巧妙補(bǔ)償這個(gè)寬度的擠壓，在滾動(dòng)條存在的情況下容器寬度仍然占據(jù)整個(gè)視口的寬度。

* {
  margin: 0;
  padding: 0;
}
html {
  overflow-y: auto;
  overflow-x: hidden;
}
.container {
  height: 2000px;
  margin-right: calc(100% - 100vw);
  padding: 17px;
  background-color: #00b83f;
  text-align: right;
}

效果如同方法二，很完美，并且兼容性還不錯(cuò)，起碼高版本的ie和ff都沒問題了。

四、張鑫旭大佬那里抄來的absolute方法

鏈接在此，這個(gè)利用了絕對定位，保證了body的寬度一直保持完整空間。

html {
  overflow-y: scroll; //這是為了兼容ie8，不支持:root, vw
}

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

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}
在一個(gè)普通的容器滾動(dòng)條擠壓怎么辦？

上面是針對瀏覽器視口的滾動(dòng)條方案，但是假如在一個(gè)普通div容器中也有如此的需求改怎么辦呢？因此此時(shí)并沒有像100vw這樣的值直接獲取容器的寬度，只能使用js的方法來檢測計(jì)算然后再用margin-right做補(bǔ)償，原理都是一樣的，但是我強(qiáng)烈不推薦也不喜歡用js來計(jì)算布局...因此在這種情況下勉強(qiáng)委屈下用上面的第一種方法了，如果是chrome下用第二種方法。

.wrap {
    overflow-y: scroll;
    overflow-y: overlay;
}

當(dāng)然你堅(jiān)決不能忍的話也可以用js去算吧...本質(zhì)也是一樣的，這里給個(gè)鏈接作為參考。

總結(jié)

方法主要就是上面的幾種，大家根據(jù)需求自由選用即可，最重要的是在使用某些新屬性的時(shí)候多加思考，很多問題的本質(zhì)并沒什么區(qū)別，只是用新的工具去做而已。

參考

都在文中了

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/114228.html

相關(guān)文章

  • 《CSS世界》筆記四：流的保護(hù)與破壞

    摘要：和可以看作是同父異母的兄弟關(guān)系。例子如下結(jié)果如下而父元素設(shè)置屬性的方式則是利用了的特性下面將會(huì)詳細(xì)講解結(jié)界全稱為，中文為塊級(jí)格式化上下文。 上一篇：《CSS世界》筆記三：內(nèi)聯(lián)元素與對齊下一篇：《CSS世界》筆記五：CSS層疊規(guī)則及元素隱藏 寫在前面 原本博客名為浮動(dòng)與定位，但是《CSS世界》第六章節(jié)的內(nèi)容不僅有浮動(dòng)定位，很大一部分篇幅都在講BFC和overflow。更吸引人的是，作者將...

    he_xd 評(píng)論0 收藏0

  • 【學(xué)習(xí)筆記】CSS深入理解之overflow

    摘要：張鑫旭的深入理解之學(xué)習(xí)筆記基本屬性屬性介紹默認(rèn)當(dāng)與值相同時(shí)，等同于當(dāng)與值不相同時(shí)，其中一個(gè)值被賦予時(shí)，若另一個(gè)值為，那這個(gè)會(huì)被重置為作用前提元素非對應(yīng)方位的尺寸限制拉伸對于單元格等需要為狀態(tài)才可以與滾動(dòng)條頁面默認(rèn)滾動(dòng)條來自與無 《張鑫旭的CSS深入理解之overflow》學(xué)習(xí)筆記 overflow基本屬性 overflow屬性介紹 overflow: visible(默認(rèn))|hidd...

    Ali_ 評(píng)論0 收藏0

  • 一個(gè)常年更新的CSS采坑合集

    摘要：采坑合集這篇文章會(huì)常年更新，在項(xiàng)目中進(jìn)行實(shí)現(xiàn)的時(shí)候，經(jīng)常會(huì)遇到很多奇怪的問題，有些問題曾經(jīng)遇到過但是又忘記了可能是記憶力衰退吧，所以這里做個(gè)合集，溫故而知新。每個(gè)章節(jié)是大概的類型集合容器樣式容器本章主要是和作為容器的元素相關(guān)的內(nèi)容。 CSS采坑合集 這篇文章會(huì)常年更新，在項(xiàng)目中進(jìn)行CSS實(shí)現(xiàn)的時(shí)候，經(jīng)常會(huì)遇到很多奇怪的問題，有些問題曾經(jīng)遇到過但是又忘記了（可能是記憶力衰退吧~），所以這...

    chnmagnus 評(píng)論0 收藏0

  • 解決chrome滾動(dòng)條背景的問題

    摘要：而默認(rèn)的寬度沒有包含滾動(dòng)條的寬度。滾動(dòng)條底下的白色其實(shí)并不是滾動(dòng)條的背景色，而是由于的寬度并未鋪滿可視區(qū)域的留白。所以我們只要在上加一個(gè)即可解決這個(gè)問題，但是這種情況下，會(huì)出現(xiàn)橫向的滾動(dòng)條。 大家都知道chrome可以自定義設(shè)置滾動(dòng)條的樣式，可以修改很多參數(shù)。主要的兩行樣式的代碼如下： ::-webkit-scrollbar{} ::-webkit-scrollbar-thumb{}...

    omgdog 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<