javascript - Hvordan kan jeg få størrelsen på nettleserens rullefelt?

Hvordan kan jeg bestemme høyden på en horisontal rullefelt, eller bredden på en vertikal, i JavaScript?

Svar #1

Fra Alexandre Gomes blogg. Jeg har ikke prøvd det. Gi meg beskjed hvis det fungerer for deg.

function getScrollBarWidth () {
  var inner = document.createElement('p');
  inner.style.width = "100%";
  inner.style.height = "200px";

  var outer = document.createElement('div');
  outer.style.position = "absolute";
  outer.style.top = "0px";
  outer.style.left = "0px";
  outer.style.visibility = "hidden";
  outer.style.width = "200px";
  outer.style.height = "150px";
  outer.style.overflow = "hidden";
  outer.appendChild (inner);

  document.body.appendChild (outer);
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild (outer);

  return (w1 - w2);
};

Svar #2

Ved å bruke jQuery, kan du forkorte Matthew Vines sitt svar til:

function getScrollBarWidth () {
    var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
        widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
    $outer.remove();
    return 100 - widthWithScroll;
};

Svar #3

For meg var den mest nyttige måten

(window.innerWidth - document.documentElement.clientWidth)

med vanlig JavaScript.

Svar #4

Dette er den eneste skriptet jeg har funnet, som fungerer i webkit-nettlesere ... :)

$.scrollbarWidth = function() {
  var parent, child, width;

  if(width===undefined) {
    parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
    child=parent.children();
    width=child.innerWidth()-child.height(99).innerWidth();
    parent.remove();
  }

 return width;
};

Minimert versjon:

$.scrollbarWidth=function(){var a,b,c;if(c===undefined){a=$('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');b=a.children();c=b.innerWidth()-b.height(99).innerWidth();a.remove()}return c};

Og du må ringe når dokumentet er klart ... så

$(function(){ console.log($.scrollbarWidth()); });

Testet 2012-03-28 på Windows 7 i nyeste FF, Chrome, IE og Safari og fungerer 100%.

kilde: http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth

Svar #5

hvis du ser etter en enkel operasjon, bare bland vanlig DOM JS og jQuery,

var swidth=(window.innerWidth-$(window).width());

returnerer størrelsen på den nåværende sidens rullefelt. (hvis det er synlig, ellers vil det returnere 0)

Svar #6

window.scrollBarWidth = function() {
  document.body.style.overflow = 'hidden'; 
  var width = document.body.clientWidth;
  document.body.style.overflow = 'scroll'; 
  width -= document.body.clientWidth; 
  if(!width) width = document.body.offsetWidth - document.body.clientWidth;
  document.body.style.overflow = ''; 
  return width; 
}

Relaterte artikler