我有一個(gè) div，其中包含超出屏幕右側(cè)的內(nèi)容。因此，我使用位于屏幕底部的自定義水平滾動(dòng)條來導(dǎo)航到 div 的末尾。問題是我的自定義水平滾動(dòng)條將我的內(nèi)容向上推。為了解決這個(gè)問題，我認(rèn)為只需將overflow-x從自動(dòng)或滾動(dòng)更改為覆蓋，這樣滾動(dòng)條就不會(huì)占用任何物理空間/移動(dòng)內(nèi)容......但不幸的是，這不起作用。要查看微妙的變化，請將自定義滾動(dòng)條的高度從 5% 更改為 0%，您將看到黃色 div 發(fā)生了變化。知道為什么會(huì)發(fā)生這種情況嗎？我不希望滾動(dòng)條移動(dòng)我的任何內(nèi)容，這就是我認(rèn)為覆蓋所完成的。澄清一下，我不想刪除滾動(dòng)條。我需要滾動(dòng)條。問題是滾動(dòng)條稍微向上移動(dòng)了我的內(nèi)容。這是非常微妙的，您可以看到它發(fā)生的方式是刪除滾動(dòng)條，您會(huì)看到內(nèi)容發(fā)生了移動(dòng)。如果沒有滾動(dòng)條，我需要內(nèi)容準(zhǔn)確地位于該位置，但我需要滾動(dòng)條。如果您仍然很難看到這種變化，請將滾動(dòng)條的高度更改為極端值，例如 50%。那就不可能錯(cuò)過了。JSFiddle： https: //jsfiddle.net/8kcmpquL/ <div id="horizontalstorecontainer"> <div class="store-scrolling-wrapper"> <div class="content"> </div> </div> </div>::-webkit-scrollbar { height: 5%;}::-webkit-scrollbar-track { background: transparent;}::-webkit-scrollbar-thumb { background: white;}#horizontalstorecontainer { z-index: 0; position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; display: flex; align-items: center; background: red;}.store-scrolling-wrapper { overflow-x: overlay; overflow-y: hidden; white-space: nowrap; text-align: center; margin: 0 auto; height: 100%; width: 100%; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; background: blue;}.content { position: relative; height: 60%; width: 300%; top: 50%; transform: translateY(-50%); background: yellow;}
4 回答
翻過高山走不出你
TA貢獻(xiàn)1875條經(jīng)驗(yàn) 獲得超3個(gè)贊
我不知道如何使 ::webkit-scrollbar 按照您的要求不占用空間。但是您可以通過更改用于居中內(nèi)容的屬性
的值來輕松解決此問題。transform
例如，如果您想使用高度為 5% 的條形，則編寫：
transform: translateY(-45%);
代替
transform: translateY(-50%);
慕蓋茨4494581
TA貢獻(xiàn)1850條經(jīng)驗(yàn) 獲得超11個(gè)贊
我只有當(dāng)我在溢出上使用“顯示”時(shí)，當(dāng)我使用“覆蓋”滾動(dòng)按鈕和黃色內(nèi)容觸摸時(shí)，即使在 50% 時(shí)，它們之間也沒有空格。
覆蓋不被視為有效值：
overlay:?non-standard?value?only?supported?by?the?WebKit-browsers?that?does?the?same?as?auto.
偶然的你
TA貢獻(xiàn)1841條經(jīng)驗(yàn) 獲得超3個(gè)贊
當(dāng)我使用您的代碼對其進(jìn)行測試時(shí)，我沒有注意到內(nèi)容有任何變化。它的內(nèi)容保留在原來的位置...所以要么是您沒有上傳正確的代碼，要么可能一開始就沒有這樣的問題...
但如果您仍然遇到問題，請嘗試將其添加到 CSS 中：
已編輯
所以實(shí)際上并沒有將你的內(nèi)容向上推，事實(shí)上，overflow-x: overlay只是給出了預(yù)期的結(jié)果。只是scrollbar-track檢查內(nèi)容而不是推動(dòng)它。將 的背景顏色更改scrollbar-track為透明以外的顏色，然后查看它覆蓋您的元素。
::-webkit-scrollbar-track {
background: red;
}
然后你可以給內(nèi)容一個(gè)可見的邊框（只是為了調(diào)試，讓你看到它的邊緣在哪里）
.content {
position: relative;
height: 50%;
width: 300%;
top: 100px;
background: yellow;
z-index: 10; // this doesn't fix it either
border: 2px solid red; // just for debugging
}
完成此操作后，當(dāng)您更改滾動(dòng)條的高度時(shí)，您會(huì)注意到，內(nèi)容的邊框底部將不再可見，這是因?yàn)闈L動(dòng)條越過了它。
一個(gè)可能的解決方法是為內(nèi)容指定一個(gè)高度值，單位為 px 或 em...（除了 % 以外的任何值）
.content {
position: relative;
height: 100px; // height not in %
}
弒天下
TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超8個(gè)贊
我解決了由于高度而被推高的問題。這是我的第一篇文章，請大家支持我。
::-webkit-scrollbar{
width: auto;
height: 0px;}
- 4 回答
- 0 關(guān)注
- 501 瀏覽
添加回答
舉報(bào)
0/150
提交
取消