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

Question

Có thể chỉ định 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ụ: xem this page giải thích cách sử dụng thuộc tính tràn. Có cách nào để đặt thanh cuộn ở phía bên tay trái của khu vực có thể cuộn được không?

Answer 1

Không, bạn không thể thay đổi vị trí thanh cuộn mà không gặp bất kỳ sự cố 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 chắn nó hoạt động trong tất cả các trình duyệt và hệ điều hành.

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

Answer 2

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

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

#scroll div{ 
    direction:ltr; 
} 

Chưa được kiểm tra.

Answer 3

Tôi gặp vấn đề tương tự. nhưng khi tôi thêm direction: rtl; vào các tab và combo 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ử gốc và cho bộ div con direction: ltr;.

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

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

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

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

.your_class { 
      direction: ltr;  
     } 

Và để div cha mẹ bổ sung bởi jQuery với lớp .scroll

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

trình trưởng ban cho tôi

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

Answer 4

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

Ví dụ:

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

Kiểm tra này: JSFiddle

Answer 5

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

Bạn có thể đảo ngược cạnh của thanh cuộn trong trình duyệt hiện đại sử dụng transform: scaleX(-1) trên bố mẹ <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 phải sử dụng một tiền tố -ms-transform hoặc -webkit-transform cho các trình duyệt như cũ như IE 9. Kiểm tra CanIUse và bấm vào nút "hiển thị tất cả" để xem yêu cầu trình duyệt cũ hơn.