如何在左側放置一個 div 滾動條？

問題描述

可以指定在 div 上放置垂直滾動條的位置 (左側還是右側)？

例如看看 this page，它解釋瞭如何使用 overflow 屬性。有沒有辦法將滾動條放在可滾動區域的左側？

最佳解決思路

你可以在 Css 中嘗試 direction:rtl; 。然後重新設置內部 div 的文本方向

#scroll{
    direction:rtl; 
    overflow:auto; 
    height:50px; 
    width:50px;}

#scroll div{
    direction:ltr;
}

未經測試。

次佳解決思路

我有同樣的問題。但是當我在標籤和手風琴組閤中添加 direction: rtl;，但是它崩潰了我的結構。

這樣做的方法是將 direction: rtl; 作為父元素添加 div，對於子 div 設置 direction: ltr; 。

我用這個第一個 https://api.jquery.com/wrap/

$( ".your selector of child element" ).wrap( "<div class='scroll'></div>" );

那麼只需簡單的使用 css 🙂

在兒童 div 添加到 css

 .your_class {
            direction: ltr;    
        }

並且由父級 div 添加 jQuery 與.scroll 類

.scroll {
            unicode-bidi:bidi-override;
            direction: rtl;
            overflow: scroll;
            overflow-x: hidden!important;
        }

為我工作

http://jsfiddle.net/jw3jsz08/1/

第三種解決思路

不，您無法更改滾動條位置，而不會出現任何其他問題。

您可以將 text-direction 更改為 right-to-left(rtl)，但也可以更改塊內的文本位置。

這個代碼可以幫助你，但我不知道它在所有的瀏覽器和操作系統中都有效。

<element style="direction: rtl; text-align: left;" />

參考文獻

• How to position a div scrollbar on the left hand side?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。