DIV 세로 스크롤 막대 왼쪽에

Question

CSS 왼쪽에 DIV 세로 스크롤 막대를 넣을 수 있습니까? jscript는 어떻습니까?

당신이 JQuery으로 원하는 어디서나 의사 스크롤이 플러그인을 추가 할 수 있습니다

Answer 1

: 나는 당신에게 완전히 네이티브 보이는 왼쪽 스크롤 막대를 제공하기 위해 jQuery 플러그인을 작성, JScrollPane

Answer 2

좋아요를, 그래서. 작동 방법

Left Scrollbar Hack Demo

은 여기 :

1. 콘텐츠 폭 (content_width)의 계산을 허용하도록 내부 창 안쪽 div 주입한다. 그런 다음 이것을 사용하여 네이티브 스크롤 막대 너비를 계산할 수 있습니다 : scrollbar_width = parent_width - content_width - horizontal_padding.

2. 두 개의 서로 다른 divs을 내용 영역으로 채우십시오.

   • 하나의 목적은 "포즈"입니다. 스크롤 바에는 만 사용됩니다.입니다. 음수의 왼쪽 여백을 사용하면 플러그인이 왼쪽으로 당겨서 스크롤 막대 만 보입니다 (이 내용은 가장자리에 잘려져 있습니다. div).

   • 다른 div은 실제로 보이는 스크롤링 내용을 저장하는 데 사용됩니다.

3. 이제는 두 가지를 함께 묶을 차례입니다. 50ms마다 (window.setInterval) scrollTop부터 "포스터"div까지 오프셋이 표시되는 스크롤되는 내용 div에 적용됩니다. 따라서 왼쪽의 스크롤바를 사용하여 위 또는 아래로 스크롤하면 스크롤 오프셋이 표시되는 내용의 div에 다시 적용됩니다.

이 설명은 아마 짜증과 여기있다, 속히, 거기에 내가 설명하지 않았다 그것에 아주 조금 더 사실이지만 :

$.fn.leftScrollbar = function(){ 
    var items = $(this); 
    $(function(){ 
     items.each(function(){ 
      var e = $(this); 
      var content = e.html(); 
      var ie = !jQuery.support.boxModel; 
      var w = e[ie?'innerWidth':'width'](), h = e[ie?'innerHeight':'height'](); 
      //calculate paddings 
      var pad = {}; 
      $(['top', 'right', 'bottom', 'left']).each(function(i, side){ 
       pad[side] = parseInt(e.css('padding-' + side).replace('px','')); 
      }); 
      //detect scrollbar width 
      var xfill = $('<div>').css({margin:0, padding:0, height:'1px'}); 
      e.append(xfill); 
      var contentWidth = xfill.width(); 
      var scrollerWidth = e.innerWidth() - contentWidth - pad.left - pad.right; 
      e.html('').css({overflow:'hidden'}); 
      e.css('padding', '0'); 

      var poserHeight = h - pad.top - pad.bottom; 
      var poser = $('<div>') 
       .html('<div style="visibility:hidden">'+content+'</div>') 
       .css({ 
        marginLeft: -w+scrollerWidth-(ie?0:pad.left*2), 
        overflow: 'auto' 
       }) 
       .height(poserHeight+(ie?pad.top+pad.bottom:0)) 
       .width(w); 

      var pane = $('<div>').html(content).css({ 
       width: w-scrollerWidth-(ie?0:pad.right+pad.left), 
       height: h-(ie?0:pad.bottom+pad.top), 
       overflow: 'hidden', 
       marginTop: -poserHeight-pad.top*2, 
       marginLeft: scrollerWidth 
      }); 

      $(['top', 'right', 'bottom', 'left']).each(function(i, side){ 
       poser.css('padding-'+side, pad[side]); 
       pane.css('padding-'+side, pad[side]); 
      }); 
      e.append(poser).append(pane); 

      var hRatio = (pane.innerHeight()+pad.bottom)/poser.innerHeight(); 
      window.setInterval(function(){ 
       pane.scrollTop(poser.scrollTop()*hRatio); 
      }, 50); 
     }); 
    }); 
}; 

는 포함하면

$('#scrollme').leftScrollbar(); 

왼쪽 스크롤바를 적용 당신이 원하는 요소 (들)에 대한 CSS 선택기로 #scrollme 교체 : jQuery를하고 페이지에서이 플러그인은, 왼쪽 스크롤 막대를 적용 할 수 있습니다.

<div style="direction: rtl; height: 250px; overflow: scroll;"> 
    <div style="direction: ltr; padding: 3px;"> 
    Content goes here 
    </div> 
</div> 

Answer 3

나는 그렇게 간단한 CSS 솔루션을 선택했다 간단한 사용 사례가 있었다. 당신은 정말로 거기에 두어야합니다. (RTL 언어를 사용하는 경우 언어 및 텍스트 방향에 대한 마크 업을 잘못 입력하지 않으면 스크롤 막대가 왼쪽에 표시됩니다.)