div 스크롤바를 왼쪽에 배치하는 방법은 무엇입니까?

div 스크롤바를 왼쪽에 배치하는 방법은 무엇입니까?

---

div에 세로 스크롤바를 배치 할 위치 (왼쪽 또는 오른쪽)를 지정할 수 있습니까?

예를 들어 , overflow 속성을 사용하는 방법을 설명하는 이 페이지 를보십시오. 스크롤 가능 영역의 왼쪽에 해당 스크롤 막대를 배치하는 방법이 있습니까?

---

작업 예 : JSFiddle

또는

모든 주요 브라우저에서 작동하는 잘라 내기 및 붙여 넣기 솔루션 (사파리 포함)

모든 높이 또는 너비가 작동합니다.

<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>

선택적 class="item_direction으로 각 항목에 추가 하여 컨테이너 방향을 유지하면서 텍스트 흐름의 방향을 변경합니다.

---

direction:rtl;CSS에서 시도해 볼 수 있습니다. 그런 다음 내부의 텍스트 방향을 재설정하십시오.div

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

#scroll div{
    direction:ltr;
}

테스트되지 않았습니다.

---

나도 같은 문제를 안고있어. 하지만 direction: rtl;탭과 아코디언 콤보를 추가하면 구조가 충돌합니다.

이를 수행하는 방법 direction: rtl;은 부모 요소로 div를 추가 하고 자식 div set direction: ltr;.

이 첫 번째 https://api.jquery.com/wrap/ 사용합니다.

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

그런 다음 단순히 CSS로 작업하십시오 :)

어린이 div에서 CSS에 추가

 .your_class {
            direction: ltr;    
        }

그리고 클래스 .scroll과 함께 jQuery에 의해 추가 된 부모 div에

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

나를 위해 지사 작품

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

---

일종의 오래된 질문이지만이 질문을 받았을 때 널리 사용되지 않는 방법을 던져야한다고 생각했습니다.

transform: scaleX(-1)부모를 사용하여 최신 브라우저에서 스크롤바의 측면을 뒤집은 <div>다음 동일한 변환을 적용하여 자식 "sleeve"요소를 뒤집을 수 있습니다.

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
}

Note: You may need to use an -ms-transform or -webkit-transform prefix for browsers as old as IE 9. Check CanIUse and click "show all" to see older browser requirements.

---

No, you can't change scrollbars placement without any additional issues.

You can change text-direction to right-to-left ( rtl ), but it also change text position inside block.

This code can helps you, but I not sure it works in all browsers and OS.

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

---

Here is what I have done to make the right scroll bar work. The only thing needed to be considered is when using 'direction: rtl' and whole table also need to be changed. Hopefully this gives you an idea how to do it.

Example:

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

Check this: JSFiddle

참고URL : https://stackoverflow.com/questions/7347532/how-to-position-a-div-scrollbar-on-the-left-hand-side