整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
是在寫樣式的時(shí)候，會(huì)碰到給div無論怎么加樣式 overflow-y: auto 的時(shí)候，都不會(huì)出現(xiàn)垂直的滾動(dòng)條，經(jīng)過不斷折騰終于知道是啥原因?qū)е铝恕?/span>
<style>
body{
height: 100%; //若是所有的div的高度都不固定，需要body高度也是100%，才可以出現(xiàn)滾動(dòng)條
}
.parent{
//你自己樣式
height: 100%; //父元素的高度也需要是100%才可以出現(xiàn)滾動(dòng)條
}
.children{
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
</style>
<div class="parent">
<div class="children">
xx-blog主題
xxzhuti主題網(wǎng)
</div>
處：https://www.cnblogs.com/huangenai/p/9717964.html
問題描述
在實(shí)現(xiàn)錨點(diǎn)定位的時(shí)候發(fā)現(xiàn)無法設(shè)置滾動(dòng)條的位置。
在Vue中，使用 document.body.scrollTop=952 無法設(shè)置滾動(dòng)條的高度。
document.body.scrollTop一直是0
原因
因?yàn)関ue的頁面指定了DTD，即指定了DOCTYPE時(shí)，使用document.documentElement。
頁面沒有DTD，即沒指定DOCTYPE時(shí)，使用document.body。
解決方案
document.documentElement=956
2018年10月10號(hào)新增
上面僅僅是說這個(gè)頁面的滾動(dòng)條高度的設(shè)定，當(dāng)我頁面內(nèi)的一個(gè)div的滾動(dòng)條設(shè)定他的高度 如下解決方案
var anchor = this.$el.querySelector('.message-list')
this.$nextTick(() => {
document.querySelector('.message-list').scrollTop = anchor.scrollHeight
})
這個(gè)解決方案在我做ng的時(shí)候又出現(xiàn)過類似的問題，我前大佬告訴我的 ，當(dāng)時(shí)只是為了解決問題并沒有了解其原理，復(fù)制進(jìn)來就過去了。
現(xiàn)在做vue了，才知道哦，為什么要這樣寫，所以說項(xiàng)目太趕，只是為了完成任務(wù)，對(duì)個(gè)人能力并沒有提升，做完了就過了， 還要解決其他的bug，其他的任務(wù)，現(xiàn)在能夠靜下來在工作過程中學(xué)習(xí)+進(jìn)步，對(duì)個(gè)人的發(fā)展才是好的。工作不僅僅是工作完成任務(wù)，是一個(gè)自己發(fā)現(xiàn)自身問題，提升能力和對(duì)自己的技術(shù)實(shí)操實(shí)踐的過程。
對(duì)前端的技術(shù)，架構(gòu)技術(shù)感興趣的同學(xué)關(guān)注我的頭條號(hào)，并在后臺(tái)私信發(fā)送關(guān)鍵字：“前端”即可獲取免費(fèi)的架構(gòu)師學(xué)習(xí)資料
知識(shí)體系已整理好，歡迎免費(fèi)領(lǐng)取。還有面試視頻分享可以免費(fèi)獲取。關(guān)注我，可以獲得沒有的架構(gòu)經(jīng)驗(yàn)哦！！
在Firefox中單獨(dú)設(shè)置滾動(dòng)條樣式，你可以使用?@-moz-document??規(guī)則。這個(gè)規(guī)則允許你為特定的瀏覽器或?yàn)g覽器引擎應(yīng)用樣式。
下面是一個(gè)例子，演示如何在Firefox中隱藏滾動(dòng)條：
@-moz-document url-prefix() {
/* 在這里添加只對(duì)Firefox生效的樣式 */
body {
scrollbar-width: none;
}
}在上面的例子中，??@-moz-document url-prefix()??表示只有在URL以空字符串（即所有URL）為前綴的情況下，才會(huì)應(yīng)用其中的樣式。在??body??元素中，??scrollbar-width: none;??將隱藏滾動(dòng)條。
請(qǐng)注意，這樣的規(guī)則只在Firefox中生效，而在其他瀏覽器中會(huì)被忽略。確保在使用這樣的規(guī)則時(shí)進(jìn)行測(cè)試，以確保所需的效果在目標(biāo)瀏覽器中按預(yù)期工作。
在CSS中，??*???（星號(hào)）和 ??body?? 分別選擇不同的元素或元素集合。
* {
margin: 0;
padding: 0;
}上述代碼會(huì)將頁面中所有元素的內(nèi)外邊距設(shè)置為零。
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
}上述代碼會(huì)將文檔主體部分的字體設(shè)置為 Arial，并將背景顏色設(shè)置為 #f0f0f0。
所以，??*??? 是一個(gè)通用的選擇器，匹配所有元素，而 ??body??? 是特定于文檔主體的選擇器，用于選擇文檔主體元素并應(yīng)用樣式。在某些情況下，你可能希望使用 ??body?? 選擇器，以更有針對(duì)性地影響文檔的主要內(nèi)容區(qū)域。
在最新的 Firefox 版本中，??-moz-scrollbar-thumb?? 偽類選擇器已被棄用，取而代之的是使用更通用的 CSS Scrollbar 模塊規(guī)范。為了在 Firefox 中優(yōu)化滾動(dòng)條并使其變細(xì)，你可以使用新的規(guī)范中的屬性。
以下是一個(gè)簡單的示例，可以使 Firefox 中的滾動(dòng)條變細(xì)：
/* Firefox 滾動(dòng)條樣式 */
* {
scrollbar-width: thin;
scrollbar-color: #999999 #f0f0f0;
}
/* Webkit 滾動(dòng)條樣式（Chrome, Safari等）*/
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-thumb {
background-color: #999999;
}
*::-webkit-scrollbar-track {
background-color: #f0f0f0;
}上述樣式包含兩部分：
請(qǐng)注意，滾動(dòng)條樣式在不同瀏覽器中可能會(huì)有所不同，因此上述樣式在 Firefox 中有效，而 Webkit 樣式在 Chrome 和 Safari 中有效。在實(shí)際使用中，你可能需要根據(jù)需要進(jìn)行調(diào)整和測(cè)試，以確保在不同瀏覽器中都能達(dá)到預(yù)期的效果。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
