DIV 左侧垂直滚动条答案

【问题标题】：DIV Vertical Scroll bar on leftDIV 左侧垂直滚动条
【发布时间】：2015-04-08 13:22:26
【问题描述】：

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

【问题讨论】：

人们（无论如何都在使用 LTR 文档）期望滚动条在右侧。你真的应该把它们留在那里。（如果您使用的是 RTL 语言，那么滚动条无论如何都会在左侧，除非您的语言和文本方向标记错误）
@Quentin：Chrome 总是在右侧显示垂直滚动条。

【解决方案1】：

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

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

【讨论】：

太棒了，但它似乎无法在 Safari 上运行（现在在 Safari 5.1.7 上测试它，滚动条在右侧）。

【解决方案2】：

您可以使用JQuery 和此插件在任意位置添加伪滚动条：JScrollPane

【讨论】：

jQuery 在这里不是强制性的。在你使用它之前，检查一下 latkinson 的纯 CSS 解决方案（就在下面）

【解决方案3】：

好的，所以，我写了一个 jQuery 插件来给你一个完全原生的左滚动条。

Left Scrollbar Hack Demo

它是这样工作的：

在窗格内注入内部 div 以允许计算内容宽度 (content_width)。然后，使用它，可以计算原生滚动条宽度：scrollbar_width = parent_width - content_width - horizontal_padding。
在窗格中创建两个不同的divs，都填充了内容。
- 一个人的目的是成为“装腔作势者”。它仅用于滚动条。使用负的左边距，插件将其向左拉，因此只有滚动条可见（div 的内容在边缘被剪掉）。
- 另一个div 用于实际容纳可见的滚动内容。
现在，是时候将两者绑定在一起了。每 50 毫秒 (window.setInterval)，从“装腔作势者”div 偏移的scrollTop 将应用于可见的滚动内容div。因此，当您使用 left 上的滚动条向上或向下滚动时，滚动偏移将应用回 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();

用 CSS 选择器替换 #scrollme 到您希望向其应用左滚动条的元素。

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

【讨论】：

我会在一天左右的时间内发布一个演示......努力让我的博客建立起来。
而不是 setInterval，尝试为 DOMAttrModified（或 IE 的 onpropertychange 事件）添加事件监听器
@jcm：已修复！对此感到抱歉。
您应该考虑使用jsfiddle 或Codepen（或类似这两个的任何服务）来展示演示。如前所述，考虑到 latkinson 的纯 CSS 解决方案，这里实际上不需要 jquery。在 jquery 中重建滚动条或其他本机 UI 项目显然是一种矫枉过正。
@Gfra54 感谢您的智慧——这是从 2009 年开始的