DIV Вертикальная Полоса прокрутки на левом

Хорошо, я написал плагин jQuery, чтобы дать вам полностью естественную левую полосу прокрутки.

Демонстрация взлома левой полосы прокрутки

Вот как это работает:

1. Вставьте внутренний div внутрь панели, чтобы можно было вычислить ширину содержимого ( content_width ). Затем, используя это, можно рассчитать собственную ширину полосы прокрутки: scrollbar_width = parent_width - content_width - horizontal_padding .

2. Создайте два разных divs внутри панели, оба заполнены содержимым.

   • Цель человека - позировать. Он используется исключительно для полосы прокрутки. Используя отрицательное левое поле, плагин оттягивает его влево, чтобы в поле зрения была только полоса прокрутки (содержимое этого div обрезается по краю).

   • Другой div используется для размещения видимого прокручиваемого содержимого.

3. Теперь пришло время связать их вместе. Каждые 50 мс ( 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 и этот плагин на страницу, применить левую полосу прокрутки: