2013-01-06 28 views
1

我正在開發一個涉及JavaScript滾動條重新定義解決方案的Web界面,該解決方案嘗試在HTML/CSS替換後隱藏瀏覽器的默認滾動條,同時保留對瀏覽器的默認滾動行爲的支持,這是許多流行的JS滾動條插件所缺乏的功能。我遇到的唯一問題是,一些瀏覽器堅持在插件創建的頂部顯示默認滾動條,從而完全破壞所需的美感。我可以使用CSS方向定位元素的滾動條嗎?

爲了試圖解決這個問題,我嘗試在包含滾動條的元素中使用overflow: hidden;並使用JS檢測默認滾動條的寬度並定位它控制的元素,使其位於剪裁邊界之外的父分部。然而,正如你們大多數人所知道的那樣,橫跨超出底部或右邊界的元素的內容可能會在鼠標拖動操作期間意外滾動到視圖中,例如文本選擇,其中課程跨越隱藏父級的底部或剪裁邊界元素(即:向右拖動會使默認滾動條返回到視圖中)。

幸運的是,當內容在這種情況下超出頂部或左邊界時,不會發生此行爲。知道這一點,我正在考慮繼續上述方法,但是使用direction: rtl將滾動條從右向左翻轉並超出隱藏元素的邊界,然後將direction: ltr應用於包含其所有元素的子元素內容否定所有實際內容的方向改變。

這個技術在我到目前爲止進行的每一個測試中都產生了期望的結果。然而,我想知道這個解決方案是否真的太好了,我忽略了一個致命的可訪問性和/或與滾動條放置的CSS方向的兼容性問題,這會妨礙我使用這種方法。

TL; DR:使用CSS方向屬性來控制元素的滾動條的位置是一個壞主意?

+1

這會更好地放在http://ux.stackexchange.com/ –

回答

1

就物業的正確使用而言,這是一個壞主意。 direction: rtl正確地用於使用替代字符編碼來翻轉文本的閱讀方向,例如,阿拉伯語,希伯來語等。試着找到解決問題的另一種方法。試着看看一些上述流行的JS滾動條插件的來源,看看他們是如何做到這一點的。

+0

感謝您花時間回答。在開始嘗試使用這些插件之後,導致我採用這種方法的問題是本機瀏覽器滾動的一些功能(例如:自動滾動到聚焦的元素,在選擇範圍被修改時滾動,本地滾動速度),沒有一個我一直遇到支持的插件。雖然我意識到這絕不是「方向」的預期目的,但我想知道這種標籤外使用是否會有任何顯着的可訪問性/可用性問題。 – Aaron

+1

我不能肯定地說,因爲我沒有這方面的經驗。我所能建議的是,你可以對自己和真實用戶進行大量測試,即使它只是一個朋友,看看你是否可以追蹤任何問題。此外,我的可訪問性是一個問題,請確保使用屏幕閱讀器進行一些研究和測試,以確保他們正確地閱讀內容。 – JoeJ

相關問題