javascript - siga - menu scroll

Barra de desplazamiento vertical DIV a la izquierda

Question

¿Es posible colocar la barra de desplazamiento vertical de DIV a la izquierda del div con css? ¿qué pasa con jscript?

Answer 1

De acuerdo, escribí un complemento de jQuery para darte una barra de desplazamiento a la izquierda de aspecto completamente nativo.

Barra de desplazamiento izquierda Hack Demo

Así es como funciona:

1. Inyecte una división interna dentro del panel para permitir el cálculo del ancho del contenido ( content_width ). Luego, utilizando esto, se puede calcular el ancho de la barra de desplazamiento nativa: scrollbar_width = parent_width - content_width - horizontal_padding .

2. Haz dos divs diferentes dentro del panel, ambos rellenos con el contenido.

   • El propósito de uno es ser un "poser". Se utiliza únicamente para la barra de desplazamiento. Usando un margen izquierdo negativo, el complemento lo tira hacia la izquierda para que solo se vea la barra de desplazamiento (el contenido de este div se recorta en el borde).

   • El otro div se utiliza para albergar realmente el contenido de desplazamiento visible.

3. Ahora, es hora de unir a los dos juntos. Cada 50 ms ( window.setInterval ), el desplazamiento scrollTop del div "poser" se aplica al div visible, contenido de desplazamiento. Por lo tanto, cuando se desplaza hacia arriba o hacia abajo con la barra de desplazamiento a la izquierda , el desplazamiento de desplazamiento se aplica de nuevo en el div con el contenido visible.

Esta explicación probablemente apesta y en realidad hay un poco más de eso que no describí, pero, sin más preámbulos, aquí 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);
        });
    });
};

Una vez que haya incluido jQuery y este complemento en la página, aplique la barra de desplazamiento izquierda:

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

Reemplace #scrollme con el selector CSS a los elementos a los que desea aplicar las barras de desplazamiento de la izquierda.

(y, obviamente, esto se degrada muy bien)

Answer 2

Puede agregar una pseudo-barra de desplazamiento en cualquier lugar que desee con JQuery y este complemento: JScrollPane

Answer 3

Tenía un caso de uso simple, así que opté por una solución css simple:

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