左侧垂直滚动条DIV

Question

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

- EBAG

---

人们在使用从左到右的文档时，期望滚动条出现在右侧。你应该让它们留在那里。（如果你正在处理从右到左的语言，那么无论如何滚动条都会出现在左侧，除非你的标记语言和文本方向出错了） - Quentin

@Quentin：Chrome 总是在右侧显示垂直滚动条。 - M. Jahedbozorgan

Answer 1

我的需求很简单，因此选择了一种简单的CSS解决方案：

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

- latkinson

---

很棒，但似乎在Safari上无法正常工作（我现在正在Safari 5.1.7上测试，滚动条在右侧）。 - user1065669

Answer 2

你可以使用JQuery和这个插件：JScrollPane在任何你想要的地方添加一个伪滚动条。

- Eduardo Molteni

---

这里不强制使用jQuery。在使用之前，请检查latkinson的纯CSS解决方案（就在下面）。 - Gfra54

Answer 3

好的，我编写了一个jQuery插件，可以为您提供完全本地化的左侧滚动条。

左侧滚动条演示

以下是其工作原理：

1. 在窗格内注入一个内部 div，以允许计算内容宽度 (content_width)。然后，使用此宽度可以计算出本地滚动条的宽度：scrollbar_width = parent_width - content_width - horizontal_padding 。

2. 在窗格内制作两个不同的 div，都装满了内容。

   • 一个用于“伪装”。它仅用于滚动条。使用负左边距，插件将其向左拉，以便只有滚动条可见（此 div 的内容在边缘处被截断）。

   • 另一个 div 用于实际容纳可见滚动内容。

3. 现在，绑定它们在一起。每50毫秒 (window.setInterval)，从“伪装”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);
        });
    });
};

在页面中引入jQuery和该插件后，应用左侧滚动条：

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

将#scrollme替换为您想应用左滚动条的元素的CSS选择器。

（显然，这样可以很好地降级）

- brianreavis

---

尝试添加一个DOMAttrModified事件监听器（或IE的onpropertychange事件），而不是使用setInterval。 - Peter

@jcm：已修复！对此感到抱歉。 - brianreavis

你应该考虑使用jsfiddle或Codepen（或类似这两个的服务）来展示演示。正如之前所说，考虑到latkinson提供的纯CSS解决方案，这里实际上没有必要使用jquery。在jquery中重新构建滚动条或其他本地UI元素显然是过度设计。 - Gfra54

@Gfra54 感谢您的智慧 - 这是来自2009年的。 - brianreavis

即使在2015年，当您搜索特定主题时，此内容也会出现在Google中（而最后一个死链接警告是在2014年）。 - Gfra54