我正在開發一個涉及JavaScript滾動條重新定義解決方案的Web界面,該解決方案嘗試在HTML/CSS替換後隱藏瀏覽器的默認滾動條,同時保留對瀏覽器的默認滾動行爲的支持,這是許多流行的JS滾動條插件所缺乏的功能。我遇到的唯一問題是,一些瀏覽器堅持在插件創建的頂部顯示默認滾動條,從而完全破壞所需的美感。我可以使用CSS方向定位元素的滾動條嗎?
爲了試圖解決這個問題,我嘗試在包含滾動條的元素中使用overflow: hidden;
並使用JS檢測默認滾動條的寬度並定位它控制的元素,使其位於剪裁邊界之外的父分部。然而,正如你們大多數人所知道的那樣,橫跨超出底部或右邊界的元素的內容可能會在鼠標拖動操作期間意外滾動到視圖中,例如文本選擇,其中課程跨越隱藏父級的底部或剪裁邊界元素(即:向右拖動會使默認滾動條返回到視圖中)。
幸運的是,當內容在這種情況下超出頂部或左邊界時,不會發生此行爲。知道這一點,我正在考慮繼續上述方法,但是使用direction: rtl
將滾動條從右向左翻轉並超出隱藏元素的邊界,然後將direction: ltr
應用於包含其所有元素的子元素內容否定所有實際內容的方向改變。
這個技術在我到目前爲止進行的每一個測試中都產生了期望的結果。然而,我想知道這個解決方案是否真的太好了,我忽略了一個致命的可訪問性和/或與滾動條放置的CSS方向的兼容性問題,這會妨礙我使用這種方法。
TL; DR:使用CSS方向屬性來控制元素的滾動條的位置是一個壞主意?
這會更好地放在http://ux.stackexchange.com/ –