DIV垂直滚动条左边

Question

是否可以将div的左边的DIV的垂直滚动条放入css中？那么jscript呢？

Answer 1

您可以添加一个伪滚动条的任何地方，你想JQuery和这个插件：JScrollPane

Answer 2

好了，所以，我写了一个jQuery插件，给你一个完全本土的前瞻性左侧滚动条。

Left Scrollbar Hack Demo

下面是如何工作的：

1. 注入内div窗格内，以允许所述内容宽度（content_width）的计算。然后，使用它，可以计算原生滚动条宽度：scrollbar_width = parent_width - content_width - horizontal_padding。

2. 在窗格内部制作两个不同的divs，两者都填充了内容。

   • 一个人的目的是成为一个“poser”。对于滚动条，它仅使用。使用负左边距，该插件将其向左拉，以便只有滚动条在视图中（此边缘的div的内容被裁剪掉）。

   • 其他div用于实际容纳可见的滚动内容。

3. 现在，是时候把两者结合在一起了。将来自“poser”div的每50ms（window.setInterval），scrollTop偏移应用于可见滚动内容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); 
     }); 
    }); 
}; 

一旦你已经包括jQuery和这个插件的页面，申请左侧滚动条：

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

更换#scrollme与CSS选择器，你想申请向左滚动条元素（一个或多个）。

（显然，这降低了很好）

Answer 3

我做了一个简单的用例，从而选择了一条简单的CSS的解决方案：

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