Estilo de la barra de desplazamiento predeterminada a la derecha

Hola, he estado intentando durante la última hora cambiar la forma en que la barra de desplazamiento predeterminada se ve en el navegador. Me refiero a que la barra de desplazamiento principal a la derecha no agrega una nueva y la estiliza. Estoy usando el complemento jScrollPane pero no parece para trabajar o no estoy haciendo algo bien. Aquí está mi código:

$("window").jScrollPane();

window
{
    width: 100%;

    overflow: auto;
}
window
{
    height: auto;

}

preguntado el 31 de julio de 12 a las 10:07

Qué está haciendo window ¿una clase? No hay un selector de CSS llamado window. Si estas usando window, Trate de html en lugar de. -

Simplemente no puedes hacerlo. Solía ​​ser posible en IE, pero no desde hace un par de años. -

Probado: funciona en IE6+, Chrome -

no use javascript para esto. Creo que es una mejor solución. css-tricks.com/custom-scrollbars-in-webkit use css y deje que el navegador decida qué hacer con esto, y si el navegador es antiguo, deje que aparezca el desplazamiento normal. Solo si la barra de desplazamiento es realmente lo principal del diseño, recomendaré usar javascript para soporte total:

1 Respuestas

Si vas a la sitio web que AK ha vinculado, verá el necesario Jquery y CSS para que esto funcione. Los he hecho más fáciles de entender para usted.

$(function()
{
    var win = $(window);
    // Full body scroll
    var isResizing = false;
    win.bind(
        'resize',
        function()
        {
            if (!isResizing) {
                isResizing = true;
                var container = $('#full-page-container'); //this should be the most parent
                // div, right beneath the <body> and covering the entire page. Change the ID HERE.
                // Temporarily make the container tiny so it doesn't influence the
                // calculation of the size of the document
                container.css(
                    {
                        'width': 1,
                        'height': 1
                    }
                );
                // Now make it the size of the window...
                container.css(
                    {
                        'width': win.width(),
                        'height': win.height()
                    }
                );
                isResizing = false;
                container.jScrollPane( //this is where outer scroll changes
                    {
                        'showArrows': true
                    }
                );
            }
        }
    ).trigger('resize');

// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');

// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if ($('#full-page-container').width() != win.width()) {
    win.trigger('resize');
}

/*Internal scrollpanes. (Not needed if you want to change only the outer)
$('.scroll-pane').jScrollPane({showArrows: true});
*/
});

Ahora CSS:

html
{
    overflow: auto;
}
#full-page-container
{
    overflow: auto;
}
/*** Optional INNER scrolls. 
.scroll-pane
{
    width: 100%;
    height: 200px;
    overflow: auto;
}
.horizontal-only
{
    height: auto;
    max-height: 200px;
}
***/

No olvide incluir Jquery, jscrollpane.css, mousewheel.js, jscrollpane.js

Respondido 22 Abr '13, 16:04

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.