在Mozilla隱藏滾動條保證金右攪亂內容

所以我藏我在Chrome使用滾動條這段代碼：在Mozilla隱藏滾動條保證金右攪亂內容

::-webkit-scrollbar { 
    width: 0px; 
    background: transparent; 
    }

而且我發現，最好的辦法把它藏在Firefox是在父div上設置margin-right：-16px。在Firefox中，這看起來不錯。然而，現在的問題在Chrome中，因爲它會將父div內的整個內容移到正確的位置。如果我試圖通過爲父div中的容器添加margin-right：16px來解決此問題，那麼它會在Firefox中混淆視圖。

我確定你以前遇到過這個問題，但是有什麼我可以解決的嗎？任何已知的方案？謝謝！

來源

2017-08-30 Retros

首先，你要隱藏自己的滾動條，但仍滾動到你的頁面？ –

如果您只是想直觀地隱藏滾動條並仍然允許用戶使用鼠標或鍵盤滾動，則可以嘗試以下CSS：'html {overflow：-moz-scrollbars-none;}' – brian17han

@ brian17han工作！我無法相信我無法在任何地方找到它。無論我看到什麼，他們只是建議用保證金來隱藏它。你可以請帖子作爲答案，所以我可以接受它作爲一個正確的？ – Retros

如果你只是想在視覺上隱藏滾動條，仍然允許用戶使用鼠標或鍵盤滾動，你可以試試下面的CSS：

html { 
    overflow: -moz-scrollbars-none; 
}

來源

2017-08-30 19:09:27 brian17han

謝謝！就是這個！ – Retros

，您可以把填充只爲鍍鉻

::-webkit-scrollbar { 
    width: 0px; 
    background: transparent; 
    -webkit-padding-end: 16px; 
    }

或者只是父DIV設置-webkit-padding-end: 16px;。
你也可以使用同樣的想法在Firefox也僅有此設置

@-moz-document url-prefix() { 
    parent div { 
     margin-right: -16px; 
    } 
}

所以保證金只得到Firefox和你沒有任何改變。

@ -moz-scrollbars-none如果你去https://developer.mozilla.org/en-US/docs/Web/CSS/overflow看看Mozilla Extensions部分，它會說「-moz-scrollbars-none」是「一個過時的API並且不再保證可以工作。」最好採用更穩定的方法。

來源

2017-08-30 18:54:01 Hobo

在Mozilla隱藏滾動條保證金右攪亂內容

回答

相關問題