DIV垂直滚动条左侧

Question

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

Answer 1

我有一个简单的用例,因此选择了一个简单的css解决方案:

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

Answer 2

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

Answer 3

好吧,所以,我写了一个jQuery插件,给你一个完全原生的左滚动条.

左滚动条Hack Demo

以下是它的工作原理:

1. div在窗格内部注入内部以允许计算内容宽度(content_width).然后,使用它,可以计算原生滚动条宽度:scrollbar_width = parent_width - content_width - horizontal_padding.

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

   • 一个人的目的是成为一个"装腔作势者".它仅用于滚动条.使用负左边距,插件将其向左拉,以便只有滚动条在视图中(其内容div在边缘处被剪掉).

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

3. 现在,是时候把两者绑在一起了.每隔50ms(window.setInterval),scrollTop"poser" 的偏移量将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);
        });
    });
};

在页面中包含jQuery和此插件后,应用左侧滚动条:

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

将#scrollmeCSS选择器替换为要将左滚动条应用到的元素.

(显然,这会很好地降低)