Javascript 左侧的DIV垂直滚动条

是否可以使用css将DIV的垂直滚动条放在DIV的左侧？那么jscript呢？

你可以在任何地方添加一个伪滚动条，这个插件：

好的，我写了一个jQuery插件，给你一个完全本地的左滚动条

下面是它的工作原理：

在窗格内插入一个内部

div

，以允许计算内容宽度（

content\u width

）。然后，使用它，可以计算本机滚动条宽度：

scrollbar\u width=parent\u width-content\u width-horizontal\u padding

在窗格中创建两个不同的

div

，两个div都填充了内容

• 一个人的目的是成为一个“装腔作势的人”。它仅用于滚动条。使用负的左边距，插件将其向左拉，以便只有滚动条在视图中（此

  div

  的内容在边缘处被剪掉）

• 另一个

  div

  用于实际存放可见的滚动内容

现在，是时候把两者结合起来了。每隔50ms（

window.setInterval

），从“poser”

div

开始的

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);
        });
    });
};

将

#scrollme

替换为要应用左滚动条的元素的CSS选择器

---

（显然，这会很好地降低）

我有一个简单的用例，所以选择了一个简单的css解决方案：

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

内容在这里

人们（无论如何都使用LTR文档）希望看到右侧的滚动条。你真的应该把它们留在那里。（如果你使用的是RTL语言，那么滚动条无论如何都会在左边，除非你的语言标记和文本方向有误）@Quentin:Chrome总是在右边显示垂直滚动条。我会在一天左右的时间里展示一个演示。。。正在启动我的博客。请尝试为DOMAttrModified（或IE的onpropertychange事件）添加事件侦听器，而不是setInterval@jcm:Fixed！很抱歉。你应该考虑使用或（或类似于这两种服务）来演示演示。如前所述，考虑到latkinson提供的纯CSS解决方案，这里不需要jquery。在jquery中重建滚动条或其他本机UI项显然是一种过火的行为。@Gfra54感谢您的智慧–这是从2009年开始的，但在Safari上似乎不起作用（现在在Safari 5.1.7上测试它，滚动条在右边）。jquery在这里不是强制性的。在使用它之前，请查看latkinson的纯CSS解决方案（就在下面）

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