我有一個 div，其中包含超出屏幕右側的內(nèi)容。因此，我使用位于屏幕底部的自定義水平滾動條來導航到 div 的末尾。問題是我的自定義水平滾動條將我的內(nèi)容向上推。為了解決這個問題，我認為只需將overflow-x從自動或滾動更改為覆蓋，這樣滾動條就不會占用任何物理空間/移動內(nèi)容......但不幸的是，這不起作用。要查看微妙的變化，請將自定義滾動條的高度從 5% 更改為 0%，您將看到黃色 div 發(fā)生了變化。知道為什么會發(fā)生這種情況嗎？我不希望滾動條移動我的任何內(nèi)容，這就是我認為覆蓋所完成的。澄清一下，我不想刪除滾動條。我需要滾動條。問題是滾動條稍微向上移動了我的內(nèi)容。這是非常微妙的，您可以看到它發(fā)生的方式是刪除滾動條，您會看到內(nèi)容發(fā)生了移動。如果沒有滾動條，我需要內(nèi)容準確地位于該位置，但我需要滾動條。如果您仍然很難看到這種變化，請將滾動條的高度更改為極端值，例如 50%。那就不可能錯過了。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貢獻1875條經(jīng)驗 獲得超3個贊
我不知道如何使 ::webkit-scrollbar 按照您的要求不占用空間。但是您可以通過更改用于居中內(nèi)容的屬性
的值來輕松解決此問題。transform
例如，如果您想使用高度為 5% 的條形，則編寫：
transform: translateY(-45%);
代替
transform: translateY(-50%);
慕蓋茨4494581
TA貢獻1850條經(jīng)驗 獲得超11個贊
我只有當我在溢出上使用“顯示”時，當我使用“覆蓋”滾動按鈕和黃色內(nèi)容觸摸時，即使在 50% 時，它們之間也沒有空格。
覆蓋不被視為有效值：
overlay:?non-standard?value?only?supported?by?the?WebKit-browsers?that?does?the?same?as?auto.
偶然的你
TA貢獻1841條經(jīng)驗 獲得超3個贊
當我使用您的代碼對其進行測試時，我沒有注意到內(nèi)容有任何變化。它的內(nèi)容保留在原來的位置...所以要么是您沒有上傳正確的代碼，要么可能一開始就沒有這樣的問題...
但如果您仍然遇到問題，請嘗試將其添加到 CSS 中：
已編輯
所以實際上并沒有將你的內(nèi)容向上推，事實上，overflow-x: overlay只是給出了預期的結果。只是scrollbar-track檢查內(nèi)容而不是推動它。將 的背景顏色更改scrollbar-track為透明以外的顏色，然后查看它覆蓋您的元素。
::-webkit-scrollbar-track {
background: red;
}
然后你可以給內(nèi)容一個可見的邊框（只是為了調(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
}
完成此操作后，當您更改滾動條的高度時，您會注意到，內(nèi)容的邊框底部將不再可見，這是因為滾動條越過了它。
一個可能的解決方法是為內(nèi)容指定一個高度值，單位為 px 或 em...（除了 % 以外的任何值）
.content {
position: relative;
height: 100px; // height not in %
}
弒天下
TA貢獻1818條經(jīng)驗 獲得超8個贊
我解決了由于高度而被推高的問題。這是我的第一篇文章，請大家支持我。
::-webkit-scrollbar{
width: auto;
height: 0px;}
- 4 回答
- 0 關注
- 463 瀏覽
添加回答
舉報
0/150
提交
取消