Làm thế nào để định vị thanh cuộn div ở bên tay trái?

Có thể chỉ định một vị trí (bên trái hoặc bên phải) cho vị trí của thanh cuộn dọc trên div không?

Ví dụ: hãy xem trang này giải thích cách sử dụng thuộc tính tràn. Có cách nào để đặt thanh cuộn đó ở bên tay trái của vùng có thể cuộn không?

Ví dụ làm việc: JSFiddle

hoặc là

Giải pháp cắt và dán hoạt động cho tất cả các trình duyệt chính (Ngay cả Safari)

Bất kỳ chiều cao hoặc chiều rộng sẽ hoạt động

<style>
  .list_container {
    direction: rtl;
    overflow:auto;
    height: 50px;
    width: 50px;
  }

  .item_direction {
    direction:ltr;
  }
</style>
<div class="list_container">
  <div class="item_direction">1</div>
  <div class="item_direction">2</div>
  <div class="item_direction">3</div>
  <div class="item_direction">4</div>
  <div class="item_direction">5</div>
  <div class="item_direction">6</div>
  <div class="item_direction">7</div>
  <div class="item_direction">8</div>
  <div class="item_direction">9</div>
  <div class="item_direction">10</div>
  <div class="item_direction">11</div>
  <div class="item_direction">12</div>
</div>

Tùy chọn thêm class="item_directionvào từng mục để thay đổi hướng của dòng văn bản trở lại, trong khi vẫn giữ nguyên hướng vùng chứa.

Bạn có thể thử direction:rtl;trong css của mình. Sau đó đặt lại hướng văn bản trongdiv

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

#scroll div{
    direction:ltr;
}

Chưa được kiểm chứng.

Tôi có cùng một vấn đề. nhưng khi tôi thêm direction: rtl;tab và tổ hợp đàn accordion nhưng nó làm hỏng cấu trúc của tôi.

Cách thực hiện là thêm div với direction: rtl;làm phần tử cha và cho tập hợp div con direction: ltr;.

Tôi sử dụng https://api.jquery.com/wrap/ đầu tiên này

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

sau đó chỉ cần làm việc với css :)

Ở trẻ em div thêm vào css

 .your_class {
            direction: ltr;    
        }

Và vào div cha được thêm bởi jQuery với lớp .scroll

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

Làm việc cho tôi

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

Đây là một câu hỏi cũ, nhưng tôi nghĩ tôi nên đưa ra một phương pháp không được phổ biến rộng rãi khi câu hỏi này được hỏi.

Bạn có thể đảo ngược mặt bên của thanh cuộn trong các trình duyệt hiện đại bằng cách sử dụng transform: scaleX(-1)trên phụ huynh <div>, sau đó áp dụng cùng một biến đổi để đảo ngược phần tử con, "tay áo".

HTML

<div class="parent">
  <div class="sleeve">
    <!-- content -->
  </div>
</div>

CSS

.parent {
  overflow: auto;
  transform: scaleX(-1); //Reflects the parent horizontally
}

.sleeve {
  transform: scaleX(-1); //Flips the child back to normal
}

Lưu ý: Bạn có thể cần sử dụng một -ms-transformhoặc -webkit-transformtiền tố cho các trình duyệt cũ như IE 9. Kiểm tra CanIUse và nhấp vào "hiển thị tất cả" để xem các yêu cầu trình duyệt cũ hơn.

Không, bạn không thể thay đổi vị trí thanh cuộn mà không có bất kỳ vấn đề nào khác.

Bạn có thể thay đổi hướng văn bản thành từ phải sang trái (rtl), nhưng nó cũng thay đổi vị trí văn bản bên trong khối.

Mã này có thể giúp bạn, nhưng tôi không chắc nó hoạt động trên tất cả các trình duyệt và hệ điều hành.

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

Đây là những gì tôi đã làm để làm cho thanh cuộn bên phải hoạt động. Điều duy nhất cần được xem xét là khi sử dụng 'hướng: rtl' và toàn bộ bảng cũng cần được thay đổi. Hy vọng rằng điều này cung cấp cho bạn một ý tưởng làm thế nào để làm điều đó.

Thí dụ:

<table dir='rtl'><tr><td>Display Last</td><td>Display Second</td><td>Display First</td></table>

Kiểm tra cái này: JSFiddle

Có một npmgói dành riêng cho nó. css-scrollbar-side