Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
Javascript: Scrollbarbreite herausfinden
Möchte man für etwas die Scrollbar ausblenden, so kann man einfach ein overflow:hidden an das Body-Element mit Javascript setzen. Allerdings verschiebt sich dabei der Content immer um die Breite der Scrollbar. Möchte man diesen Effekt verhindern, so kann man mit folgendem Snippet die Breite der Scrollbar herausfinden.
measureScrollbar = function () {
var scrollDiv = document.createElement('div')
scrollDiv.className = 'modal-scrollbar-measure'
$('body').append(scrollDiv)
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth
$('body')[0].removeChild(scrollDiv)
return scrollbarWidth
}
Um das Ganze jetzt sinnvoll einzusetzen muss man die Funktion aufrufen und das Ergebnis dann mit dem overflow:hidden an den Body setzen. Könnte mit jQuery so gehen:
var scrollbarWidth = measureScrollbar();
$('body').css({
'overflow' : 'hidden',
'padding-right': scrollbarWidth
});
Natürlich braucht man für das Zurücksetzen, bzw. überhaupt erst setzen des Padding eine Option, die sagt ob es gerade überhaupt eine Scrollbar gibt und wie das Padding möglicherweise vorher am Body war.
Kommentare
Es gibt noch keine Kommentare. Sei der Erste!
Hinterlasse einen Kommentar