2012-07-24 7 views
6

Ich verwende niceScroll jQuery-Plugin gängigen Browser Scrollbalken zu ersetzen <div>'s in überfüllt. Das Plugin funktioniert gut, aber ich kann es nicht zur Arbeit kommen und die Scroll-Schiene angezeigt immer (auch wenn der Inhalt nicht <div> Grenzen überschreitet). Meine letzte Konfiguration ist:immer anzeigen niceScroll Schiene

$(document).ready(function() { 
    $(".div-wrapper").niceScroll({ 
     cursorcolor: "#333", 
     cursoropacitymin: 0.3, 
     background: "#bbb", 
     cursorborder: "0", 
     autohidemode: false, 
     cursorminheight: 30 
    }); 
}; 

Ich habe versucht, $(".div-wrapper").getNiceScroll().show() zu feuern, aber es scheint nicht zu funktionieren.

Jede Hilfe würde geschätzt, dank

Antwort

6

Zuerst haben Sie eine fehlende Klammer am Ende - könnte das Ihr Problem sein?

Einstellung autohidemode auf false bedeutet nur, dass es nicht verschwindet, wenn der Benutzer nicht mehr steigt und dann wieder erscheint beim Scrollen. Leider bedeutet es nicht, dass es sichtbar ist, wenn der Inhalt nicht überläuft.

Als Abhilfe können Sie mit id = ascrail2000 explizit sichtbar nach Ihrem Anruf .niceScroll() mit so etwas wie diesem, das Element zu machen versuchen können:

$(document).ready(function() { 
    $(".div-wrapper").niceScroll({ 
     cursorcolor: "#333", 
     cursoropacitymin: 0.3, 
     background: "#bbb", 
     cursorborder: "0", 
     autohidemode: false, 
     cursorminheight: 30 
    }); 
    $('#ascrail2000').show(); 
}); 

SEHEN SIE DIE FEHLENDEN PAREN in der letzten Zeile

Sie müssen ihre Kinder Elemente sichtbar und machen:

$('#ascrail2000 *').show(); 

(Achten Sie darauf, dass das Element‘ s-ID ist ascrail2000 in Ihrem Fall)

UPDATE:. als veritas hat darauf hingewiesen, unter Verwendung eines allgemeineren Wähler div[id^='ascrail'] statt #ascrail2000 es für mehr als eine nicescroll auf einer Seite arbeiten macht, so dass die oben getan werden kann, mit JavaScript:

$("div[id^='ascrail']").show(); 

oder in CSS:

div[id^='ascrail'] { display: block; } 

oder wenn die oben nicht funktioniert:

div[id^='ascrail'] { display: block !important; } 

Dies ist nicht die eleganteste Lösung, aber ich fürchte, dies ist zur Zeit der einzige Weg, um dieses Problem zu lösen, weil das Nicescroll-Plugin keine Option hat, dieses Verhalten auszuwählen. Zum Glück ist nicescroll Open Source und available on GitHub so könnte man leicht Gabel und fügen Sie eine solche Option oder post a feature request auf GitHub.

+0

Danke, aber ich war ein Tippfehler in meiner Frage:/Ich kann nicht hartcodierten '#ascrail ...' Wert in Javascript (oder CSS) festlegen, weil ich 'n' Schriftrollen auf der Seite haben kann. Aber '+ 1' für die Mühe und teilweise gute Antwort. – veritas

+0

CSS-Selektor 'div [id^= 'ascrail'] {Anzeige: Block; } 'ist eine CSS-Lösung für dieses Problem, aber ich würde etwas anderes bevorzugen. – veritas

+1

@veritas: Ich fürchte, es gibt derzeit keine bessere Lösung, aber Sie können immer eine Feature-Anfrage veröffentlichen, um es einfacher zu machen - siehe meine aktualisierte Antwort. – rsp

0

Ich gehe davon aus, dass, wenn der Inhalt nicht den Begrenzungsrahmen nicht überlaufen, niceScroll nichts tut, was das Problem sein könnte. Beachten Sie, dass niceScroll nicht> $ overflow: scroll; ... Ohne das Plugin selbst zu durchsuchen, kann ich nicht sicher sein, aber ich würde annehmen, dass es einen eingebauten Check eingebaut hat, um zu testen, ob der Inhalt gescrollt werden muss Ist dies nicht der Fall, wird die Funktion automatisch beendet.

+0

Das Plugin erstellt scroll 'divs' in DOM und setzt ihren Wert auf' display: none; ' also funktioniert es. – veritas

6
$(".div-wrapper").niceScroll({ 
    cursorcolor: "#333", 
    cursoropacitymin: 0.3, 
    background: "#bbb", 
    cursorborder: "0", 
    autohidemode: false, 
    cursorminheight: 30 
}); 
0

Ich sehe diese Antwort mit einer Google-Suche, auch wenn es alt ist, das ist meine Arbeitslösung, wenn jemand dieses Suchen nach einer Antwort sehen:

 $('#ascrail2000.nicescroll-rails').show(); 
     $('#ascrail2000.nicescroll-rails div').height('300px').show(); 

ich eine beliebige Höhe einstellen muß die "bar" div, weil standardmäßig die Höhe: 0px, selbst wenn Sie es anzeigen, können Sie nichts sehen. Ich denke, wir können besser eine gute Höhe mit den Windows-Abmessungen berechnen, aber ich brauche nicht :)

Verwandte Themen