javascript - posicion - scroll page js

Obtener el ancho de la barra de desplazamiento usando JavaScript

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo puedo obtener los tamaños de la barra de desplazamiento del navegador? 17 respuestas

El siguiente HTML mostrará una barra de desplazamiento en el borde interior derecho de div.container.

¿Es posible determinar el ancho de esa barra de desplazamiento?

<div class="container" style="overflow-y:auto; height:40px;">
<div class="somethingBig"></div>
</div>

Answer 1

// offsetWidth incluye el ancho de la barra de desplazamiento y clientWidth no. Como regla, es igual a 14-18px. asi que:

 var scrollBarWidth = element.offsetWidth - element.clientWidth;

Answer 2

Aquí hay una manera fácil de usar jQuery.

var scrollbarWidth = jQuery(''div.withScrollBar'').get(0).scrollWidth - jQuery(''div.withScrollBar'').width();

Básicamente restamos el ancho desplazable del ancho total y eso debería proporcionar el ancho de la barra de desplazamiento. Por supuesto, querría guardar en caché la selección de jQuery (''div.withScrollBar'') para que no esté haciendo esa parte dos veces.

Answer 3

Creo que esto será simple y rápido -

var scrollWidth= window.innerWidth-$(document).width()

Answer 4

Esta función debería darle ancho de barra de desplazamiento

function getScrollbarWidth() {
var outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
document.body.appendChild(outer);
var widthNoScroll = outer.offsetWidth;
// force scrollbars
outer.style.overflow = "scroll";
// add innerdiv
var inner = document.createElement("div");
inner.style.width = "100%";
outer.appendChild(inner);
var widthWithScroll = inner.offsetWidth;
// remove divs
outer.parentNode.removeChild(outer);
return widthNoScroll - widthWithScroll;
}

Los pasos básicos aquí son:

1. Cree div oculto (externo) con ancho establecido en ''100px'' y obtenga ancho de desplazamiento (debe ser 100)
2. Forzar barras de desplazamiento para que aparezcan en div (externo) usando la propiedad de desbordamiento de CSS
3. Cree un nuevo div (interno) y anexe al exterior, establezca su ancho en ''100%'' y obtenga el ancho del offset
4. Calcular el ancho de la barra de desplazamiento en función de las compensaciones recopiladas

Ejemplo de trabajo aquí: http://jsfiddle.net/UU9kg/17/

Actualizar

Si está utilizando esto en una aplicación de Windows (metro), asegúrese de configurar la -ms-overflow-style del div ''externo'' en la scrollbar de scrollbar , de lo contrario, el ancho no se detectará correctamente. (código actualizado)

Actualización n. ° 2 Esto no funcionará en Mac OS con la configuración predeterminada "Mostrar solo las barras de desplazamiento al desplazarse" (Yosemite y arriba).

Answer 5

He utilizado la siguiente función para obtener la altura / ancho de la barra de desplazamiento:

function getBrowserScrollSize(){
var css = {
"border": "none",
"height": "200px",
"margin": "0",
"padding": "0",
"width": "200px"
};
var inner = $("<div>").css($.extend({}, css));
var outer = $("<div>").css($.extend({
"left": "-1000px",
"overflow": "scroll",
"position": "absolute",
"top": "-1000px"
}, css)).append(inner).appendTo("body")
.scrollLeft(1000)
.scrollTop(1000);
var scrollSize = {
"height": (outer.offset().top - inner.offset().top) || 0,
"width": (outer.offset().left - inner.offset().left) || 0
};
outer.remove();
return scrollSize;
}

Estas soluciones basadas en jQuery funcionan en IE7 + y en todos los demás navegadores modernos (incluidos los dispositivos móviles donde la altura / ancho de la barra de desplazamiento será 0).

Answer 6

Si el niño toma el ancho completo del contenedor excluyendo la barra de desplazamiento (el valor predeterminado), puede restar los anchos:

var child = document.querySelector(".somethingBig");
var scrollbarWidth = child.parentNode.offsetWidth - child.offsetWidth;

Answer 7

Si usas jquery.ui, prueba este código:

$.position.scrollbarWidth()

Answer 8

Suponiendo que el contenedor está solo en la página una vez y está usando jQuery, entonces:

var containerEl = $(''.container'')[0];
var scrollbarWidth = containerEl.offsetWidth - containerEl.clientWidth;

También vea esta respuesta para más detalles.

Answer 9

this funcionó para mí ...

 function getScrollbarWidth() {
var div = $(''<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>'');
$(''body'').append(div);
var w1 = $(''div'', div).innerWidth();
div.css(''overflow-y'', ''scroll'');
var w2 = $(''div'', div).innerWidth();
$(div).remove();
return (w1 - w2);
}