如何在左侧放置一个 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 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。