本篇文章給大家?guī)?lái)了關(guān)于前端的相關(guān)知識(shí)，其中主要給大家聊聊一個(gè)奇怪的水平滾動(dòng)條問(wèn)題，感興趣的朋友下面一起來(lái)看一下吧，歡迎大家收藏學(xué)習(xí)！
今天改一個(gè)前端同學(xué)的樣式代碼,發(fā)現(xiàn)了一個(gè)奇怪的問(wèn)題.
(資料圖)
大概是這樣：
我的視窗寬度是1920px，滾動(dòng)容器寬度1903px，然后還出現(xiàn)了水平滾動(dòng)條，匪夷所思。由于文件嵌套太深，查找起來(lái)非常耗時(shí)，因此就求助于全局函數(shù)，是誰(shuí)觸發(fā)了滾動(dòng)條的操作。于是就有了以下代碼
function findScroller(element) { element.onscroll = function() { console.log(element)} Array.from(element.children).forEach(findScroller);}findScroller(document.body);打印出的對(duì)象是 ，<body>。這就不明白了。 明明元素離body還很遠(yuǎn)，也沒(méi)有元素超寬，這個(gè)滾動(dòng)條到底從哪兒來(lái)？
非常難過(guò)，一個(gè)技能不行就要求助第二個(gè)方式 —— 刪代碼。 一行一行的刪，然后將他轉(zhuǎn)為基礎(chǔ)元素，比如自定義的模型，直接替換成一個(gè)div，然后添加樣式，再刪除無(wú)用的代碼，這樣就做出來(lái)了一個(gè)簡(jiǎn)易模型。
經(jīng)過(guò)觀察發(fā)現(xiàn)， 如果元素沒(méi)有超高，那么元素也不會(huì)出現(xiàn)橫向滾動(dòng)的問(wèn)題，如果元素超高，則就會(huì)同時(shí)出現(xiàn)垂直和水平兩個(gè)滾動(dòng)條。
更迷惑了。
所以，我倒過(guò)來(lái)分析，發(fā)現(xiàn)，這個(gè)超高元素的寬度雖然沒(méi)有超過(guò)視窗寬度，為1903px，但是，PC下瀏覽器滾動(dòng)條默認(rèn)寬度為17px，且此垂直滾動(dòng)條是在body下的， 和上文的打印對(duì)象吻合。由此可知：
這么一來(lái)就可知， 如果有body下的子元素的寬度設(shè)置為 1920px或者 100vw 或者等于100wv的任意一項(xiàng)，即可出現(xiàn)，此出現(xiàn)橫向滾動(dòng)條的現(xiàn)象。
經(jīng)過(guò)老師傅的一頓操作，終于發(fā)現(xiàn)了一個(gè)設(shè)置樣式不合理的問(wèn)題。由此我簡(jiǎn)化了模型代碼如下：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>超寬導(dǎo)致元素溢出滾動(dòng)條</title> <style> body, html { margin: 0; padding: 0; } .menu-bar { height: 50px; border: 1px solid; box-sizing: border-box; } .incorrect { width: 100vw; } .oversize { height: 100vh; } </style></head><body> <div class="menu-bar incorrect"> </div> <div></div></body></html>由此， 寫(xiě)代碼時(shí)需要不斷分析，css樣式一定要有跡可循，切不可隨意添加。導(dǎo)致異常出現(xiàn)時(shí)費(fèi)心費(fèi)力。
推薦學(xué)習(xí)：《web前端開(kāi)發(fā)》
以上就是聊聊前端里一個(gè)奇怪的水平滾動(dòng)條的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
關(guān)鍵詞：
營(yíng)業(yè)執(zhí)照公示信息