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
}

참고 : IE 9 이전의 브라우저 에는 -ms-transform또는 -webkit-transform접두사 를 사용해야 할 수 있습니다. CanIUse를 선택 하고 "모두 표시"를 클릭하여 이전 브라우저 요구 사항을 확인하십시오.

아니요, 추가 문제없이 스크롤바 위치를 변경할 수 없습니다.

텍스트 방향을 오른쪽에서 왼쪽 (rtl)으로 변경할 수 있지만 블록 내부의 텍스트 위치도 변경합니다.

이 코드는 도움이 될 수 있지만 모든 브라우저와 OS에서 작동하는지 확신 할 수 없습니다.

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

다음은 오른쪽 스크롤 막대가 작동하도록하기 위해 수행 한 작업입니다. 고려해야 할 유일한 것은 'direction : rtl'을 사용할 때이며 전체 테이블도 변경해야하는 경우입니다. 바라건대 이것은 당신에게 그것을하는 방법에 대한 아이디어를 제공합니다.

예:

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

이것을 확인하십시오 : JSFiddle

npm그것에 대한 전용 패키지가 있습니다. css- 스크롤바 쪽