更改滚动条位置而不更改文本方向答案

【问题标题】：Change scrollbar position without changing text direction更改滚动条位置而不更改文本方向
【发布时间】：2021-04-30 17:29:48
【问题描述】：

我正在使用 react，但使用 textarea 标签的设计有问题。现在它看起来像这样：

我想将滚动条向右移动，而不改变文本方向 (rtl)。我正在使用TextareaAutosize 组件（MUI）。我尝试了很多解决方案，但没有一个能移动滚动条。

谢谢

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

我在正文开头使用'\u202E'（强制rtl），并将整个textarea设置为ltr。这将滚动条移到右侧，文本方向保持在rtl。我还需要设置text-align:right，所以文字会浮动到正确的方向。

有效！

【讨论】：

【解决方案2】：

你可以试试这个css。


    <style>
        body {
            text-align: center;
        }
          
          
        /* Set the style of container
            div element */
        .Container{
            height: 150px;
            width: 250px;
            overflow-y: auto;
            background-color: green;
            border-radius: 5px;
            margin: 0 auto;
        }
        /* Set the effects to the division
            named content */
        .Content{
            height: 200px;
            color: white;
            text-align: center;
        }
          
        /* Designing for scroll-bar */
        ::-webkit-scrollbar {
            width: 6px;
        }
      
        /* Track */
        ::-webkit-scrollbar-track {
            background: gainsboro;
            border-radius: 5px;
        }
      
        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: black;
            border-radius: 5px;
        }
      
        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </style>

and here is the usage.
  
    <div class="Container">
        <div class="Content">
            some text ...
        </div>
    </div>

【讨论】：