DIV barre de défilement verticale à gauche

j'ai eu un cas simple d'utilisation donc opté pour un simple css solution:

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

Ok, donc, j'ai écrit un plugin jQuery pour vous donner une barre de défilement à gauche complètement native.

Gauche Scrollbar Hack Demo

Voici comment cela fonctionne:

1. injecter une solutiondiv à l'intérieur du panneau pour permettre le calcul de la largeur du contenu (content_width). Ensuite, en utilisant ceci, la largeur du scrollbar natif peut être calculée: scrollbar_width = parent_width - content_width - horizontal_padding .

2. deux divs à l'intérieur de la vitre, tous les deux remplis du contenu.

   • le but de L'un est d'être un "poseur". Il est utilisé uniquement pour le scrollbar. En utilisant une marge de gauche négative, le plugin tire à gauche pour que seule la barre de défilement soit visible (le contenu de cette div est coupé au bord).

   • L'autre div est utilisé pour héberger le contenu de défilement visible.

3. Maintenant, il est temps de lier les deux ensemble. Tous les 50 mois (window.setInterval),scrollTop décalage à partir de la "poser" div est appliqué au contenu visible, défilant div. Donc, quand vous faites défiler vers le haut ou vers le bas avec la barre de défilement sur le gauche, le déport de rouleau est appliqué de nouveau sur le div avec le contenu visible.

cette explication craint probablement et il y a en fait un peu plus à elle que je n'ai pas décrit, mais, sans plus de cérémonie, ici il est:

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

une fois que vous avez inclus jQuery et ce plugin dans la page, appliquez la barre de défilement de gauche:

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

Remplacer #scrollme avec le sélecteur CSS sur le ou les éléments auxquels vous souhaitez appliquer les barres de défilement de gauche.

(et, évidemment, cela se dégrade bien)