Develop Reference

When to use offsetHeight, clientHeight and scrollHeight and how to find we reached bottom of page?

What's the difference between offsetHeight, clientHeight and scrollHeight ?
Also, how to find that we reached bottom of the page considering that page is dynamically loaded(lazy loading) as we scroll down ?

offsetHeight:
Returns height of an element in px unit. Includes height of padding, scrollBar and border but NOT margin
clientHeight:
Returns height of an element in px unit. Includes padding but NOT scrollBar, border and margin
scrollHeight:
Returns height of an element in px unit. Includes padding, scrollBar, border and margin.
Same holds for Width in clientWidth, offsetWidth and scrollWidth
Here is an fiddle:
function whatis(propType)
{
var mainDiv = document.getElementById("MainDIV");
if(window.sampleDiv==null){
var div = document.createElement("div");
window.sampleDiv = div;
}
div = window.sampleDiv;
var propTypeWidth = propType.toLowerCase()+"Width";
var propTypeHeight = propType+"Height";
var computedStyle = window.getComputedStyle(mainDiv, null);
var borderLeftWidth = computedStyle.getPropertyValue("border-left-width");
var borderTopWidth = computedStyle.getPropertyValue("border-top-width");
div.style.position = "absolute";
div.style.left = mainDiv.offsetLeft+Math.round(parseFloat((propType=="client")?borderLeftWidth:0))+"px";
div.style.top = mainDiv.offsetTop+Math.round(parseFloat((propType=="client")?borderTopWidth:0))+"px";
div.style.height = mainDiv[propTypeHeight]+"px";
div.style.lineHeight = mainDiv[propTypeHeight]+"px";
div.style.width = mainDiv[propTypeWidth]+"px";
div.style.textAlign = "center";
div.innerHTML = propTypeWidth + " X " + propTypeHeight + "( " +
mainDiv[propTypeWidth] + " x "+ mainDiv[propTypeHeight] + " )";
div.style.background = "rgba(0,0,246,0.5)";
document.body.appendChild(div);
}
document.getElementById("offset").onclick = function(){whatis('offset');}
document.getElementById("client").onclick = function(){whatis('client');}
document.getElementById("scroll").onclick = function(){whatis('scroll');}
#MainDIV{
border:5px solid red;
}
<button id="offset">offsetHeight & offsetWidth</button>
<button id="client">clientHeight & clientWidth</button>
<button id="scroll">scrollHeight & scrollWidth</button>
<div id="MainDIV" style="margin:auto; height:200px; width:400px; overflow:auto;">
<div style="height:400px; width:500px; overflow:hidden;"></div>
</div>
Fiddle copied from: http://jsfiddle.net/shibualexis/yVhgM/3/
Using above mentioned functions to know that we reached bottom of page can be done like this:
if((window.innerHeight + window.pageYOffset) >= document.body.scrollHeight )){
//We reached bottom of page and there is no more vertical scroll can happen.
}
Hence, this is how you can make vertical scroll:
while(!(window.innerHeight + window.pageYOffset) >= document.body.scrollHeight )){
window.scrollTo(0, document.body.scrollHeight);
}
Here the condition (window.innerHeight + window.pageYOffset) >= document.body.scrollHeight ) is browser independent and can be run on Chrome, FF, IE and Safari.

Save a specific BoundingClientRect?

I'm using getBoundingClientRect to change an elements position to absolute without changing it's position:
style.position = 'absolute'
style.top = container.getBoundingClientRect().top
style.left = container.getBoundingClientRect().left
style.width = container.offsetWidth
I do this to later transition the element to fullscreen, like this:
style.top = 0
style.left = 0
style.width = '100%'
style.height = '100%'
style.transitionProperty = 'top, left, width, height'
style.transitionDuration = '.2s'
Style is a javascript object that gets converted to css-properties.
Later on I want to close the full-screen-thing and revert the element back to it's original size. I would like to save the values from getBoundingClientRect as they are at the first transition. Can this be done?

Yes, it can be done. Like this:
var bcr = container.getBoundingClientRect();
style.width = '100%';
// later
style.width = bcr.width;
var el = document.querySelector('div');
var bcr = null;
document.querySelector('button').addEventListener('click', function() {
if (bcr) { // Currently fullscreen
el.style.position = '';
el.style.top = bcr.top + 'px';
el.style.left = bcr.left + 'px';
el.style.width = bcr.width + 'px';
el.style.height = bcr.height + 'px';
bcr = null;
} else {
bcr = el.getBoundingClientRect();
el.style.position = 'absolute';
el.style.top = el.style.left = 0;
el.style.width = el.style.height = '100%';
}
});
div {
background: yellow;
height: 100px;
width: 300px;
}
<div>
<button>Toggle fullscreen</button>
</div>
That said, most probably you don't need it, because just assigning the styles to the empty string will do the trick.

Avoid right jump of elements with javascript and local variable when hiding vertical scrollbar

I would like to add left margin and right margin to the body to hide the width change when I hide the vertical scrollbar.
I have this code that finds the width of the vertical scrollbar:
var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
$outer.remove();
var scrollbarwidth = 100 - widthWithScroll;
It gives the value "17" (in pixels) for IE11, Chrome 45, and Firefox 39 (desktop).
When I hide the vertical scrollbar, all elements, such as images, jump exactly 17 pixels to the right, which I want to hide.
I have tried:
document.body.style.marginRight = scrollbarwidth + "px";
$('body').css('margin-right', scrollbarwidth);
$(body).css("marginRight", scrollbarwidth + "px");
The last one might be faulty in some way, since other parts of the function stops working when it's enabled. The two others don't seem to work either, as I don't see any margin changes.
EDIT 1: For easier understanding of how I am going to use it, I wanted to mention that it's supposed to trigger on a on scroll function, like this:
var check1 = false;
$(document).bind('scroll', function() {
if(check1 === false && $(window).scrollTop() >= $('#divscrolltester').offset().top + $('#divscrolltester').outerHeight() - window.innerHeight) {
check1 = true;
unloadScrollBars();
disableScroll();
var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
$outer.remove();
var scrollbarwidth = 100 - widthWithScroll;
//document.body.style.paddingRight = scrollbarwidth + "px"; Temporary disabled.
//$('body').css('padding-right', scrollbarwidth); Temporary disabled.
//$(body).css("marginRight", scrollbarwidth + "px"); Temporary disabled.
setTimeout(function() {
enableScroll();
reloadScrollBars();
//document.body.style.paddingLeft = scrollbarwidth + "px"; Temporary disabled.
//$('body').css('padding-left', scrollbarwidth); Temporary disabled.
//$(body).css("marginLeft", scrollbarwidth + "px"); Temporary disabled.
}, 500);
}
});
EDIT 2:
Here is a Fiddle to show most of the js, html and css: https://jsfiddle.net/tfnwj7dj/10/.
I haven't added the change of css through code yet, as I'm still trying to solve the issue. Also, the scrolling and scrollbar are supposed to be re-enabled in a second, but there seems to be an error in there somewhere, sorry.
EDIT 3:
For your information at this moment, these lines work:
document.body.style.paddingLeft = (scrollbarwidth) + "px";
$('body').css('padding-left', scrollbarwidth);
document.body.style.paddingRight = (scrollbarwidth) + "px";
$('body').css('padding-right', scrollbarwidth);
document.body.style.marginLeft = (scrollbarwidth) + "px";
$('body').css('margin-left', scrollbarwidth);
document.body.style.marginRight = (scrollbarwidth) + "px";
$('body').css('margin-right', scrollbarwidth);
Maybe you have enough information to solve it, if you have the same issue, but unfortunately, this wasn't enough for me. It might be important info to know that I have my content centered with a width / max-width of just 500px, and that I don't actually have a body class. Maybe on designs with width="100%", or elements with absolute positioning, the lines might be enough.
Both javascript and jquery solutions are welcomed.
EDIT 4:
I finally solved it for my own circumstances - feel free to read the answer below. It works for preventing elements to jump when hiding the vertical scrollbar, and with some tinkering, it could probably do for a body class, or other situations.

Is your scrollbarwidth integer? Try this
var scrollbarwidth = 100;
$('body').css('margin-right', scrollbarwidth);
Maybe you have wrong value at scrollbarwidth ? In my ff this code works.

I managed to solve it - I'd like to clarify that my css actually don't contain a body class, and that I just centered all elements with a width / max-width of 500px and margin-left/right auto.
For my and other, similar cases, here is the answer:
/* First 5 lines for finding the scrollbar width. */
var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
$outer.remove();
var scrollbarwidth = 100 - widthWithScroll;
var scrollbarwidthadjustment = scrollbarwidth / 2; /* For centered elements, divide the scrollbar width by 2. */
var element = document.getElementById('element');
element.style.right = (scrollbarwidthadjustment) + "px";
And when you re-enable the vertical scrollbar, simply add:
element.style.right = "0px";
Also, the element must have a css position stated, otherwise it won't trigger. Here is an example of a css style that works:
.examplestyle {
color: white;
position: relative;
margin-left: auto;
margin-right: auto;
max-width: 100%;
display: block;
}
EDIT 1:
To prevent some unsightly css errors on mobile devices, add these lines:
/* ... */
var scrollbarwidthadjustment = scrollbarwidth / 2;
var windowWidth = $(window).width(); /* Get current window width on click/scroll etc. */
var window1 = windowWidth + scrollbarwidth; /* Window width + scrollbar width. */
var element = document.getElementById('element');
if(window1 >= widthofelement) {element.style.right = (scrollbarwidthadjustment) + "px";}
else {}
EDIT 2:
Fix for image resized smaller than its original size:
var offsetwidth = element.offsetWidth;
var widthadjustment = offsetwidth - scrollbarwidth; /* Get full width of image when scrollbar hidden, and then remove the scrollbar width. */
if(window1 < widthofelement && scrollbarwidth > 0) {
element.style.width = widthadjustment + "px";
element.style.right = (scrollbarwidthadjustment) + "px";
}
And then this code when showing the Y-scrollbar again:
if(window1 < widthofelement && scrollbarwidth > 0) {
element.style.width = "OriginalSizepx";
element.style.right = "0px";
}
If you want to use every edit that I have added, here is the full code:
/* First 5 lines for finding the scrollbar width. */
var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
$outer.remove();
var scrollbarwidth = 100 - widthWithScroll;
var scrollbarwidthadjustment = scrollbarwidth / 2; /* For centered elements, divide the scrollbar width by 2. */
var element = document.getElementById('element'); /* Put element ID into a variable for easier use, and consecutive uses without re-identifying it. */
var window1 = windowWidth + scrollbarwidth; /* Window width + scrollbar width. */
var offsetwidth = element.offsetWidth; /* Get exact element size in current window. Shows shown dimensions when the window is resized. */
var widthadjustment = offsetwidth - scrollbarwidth; /* Get full width of image when scrollbar hidden, and then remove the scrollbar width. */
if(window1 >= widthofelement) {element.style.right = (scrollbarwidthadjustment) + "px";} /* If current window is equal to or greater than element width... */
if(window1 < widthofelement && scrollbarwidth > 0) { /* If current windows is smaller than the element width, and the window has a scrollbar greater than 0 pixels in width. */
element.style.width = widthadjustment + "px";
element.style.right = (scrollbarwidthadjustment) + "px";
}
/* When re-enabling the Y-scrollbar again; */
if(window1 >= widthofelement) {element.style.right = "0px";}
if(window1 < widthofelement && scrollbarwidth > 0) {
element.style.width = "OriginalSizepx";
element.style.right = "0px";
}
For further clarification, this code will prevent elements from jumping to the right when you hide the vertical scrollbar.

padding is your answer, as Shikkediel said. Just change margin to that and it'll work.
The items move because you change the default margin body has, so the whole body moves to the left (in case we are modifying margin-right).
If you remove the scroll bar, the default margin will go right behind it, and then you need to "buffer" the rest, left of the margin, and that's what padding does.
I really enjoy working with the Inspecting tool Chrome supplies (Ctrl + Shift + I) and then in the Styles tab on the right scorll down until you see the measurements. It really helps understand the CSS box model.

Did you add 'px' here..
$('body').css('margin-right', scrollbarwidth+'px')??
Just nowI tried in w3schools. If you add 'px' to above syntax, it is working for me.

javascript - center div (position:absolute) vertically and horizontally to screen view

I am trying to make a usercript that overlays text boxes over images: It uses a draggable menu using interactjs with fixed position. The menu has a button and I need it to create a div of 20px*60px and show it at the center of the screen view (so not to scroll to the bottom of the page and drag it from there). I can do it (somewhat) by using:
var div = document.getElementById("inserted_div_2");
div.style.position = 'fixed';
div.style.top = '50%'; //relative to screen
div.style.left = '50%';
From there I can drag/resize it to where I want over the image (also using interactjs) but then, how can I change it to position:absolute so it scrolls with the content keeping the same position over the images (eg: in the top left corner of img2)? something like:
var posX = div.getPosX(); //relative to page; in %, px or em
var posY = div.getPosY();
// when I change it from fixed to absolute the div goes back to the bottom of the page
div.style.position = 'absolute';
div.style.left = posX;
div.style.top = posY;
The HTML structure looks something like this:
<body>
...
<div id="content">
...
<img src="/img1.jpg"> // size and number of imgs is variable.
<img src="/img2.jpg"> // are in a strip format.
<img src="/img3.jpg">
...
</div>
...
<div id="overlays">
//eg: div1 was dragged from the center of screen
//into in between img1 and img2
<div id="inserted_div_1">Text</div>
//now I need to do the same for div2,
//dragging it to the top left corner of img2
<div id="inserted_div_2">Text</div>
</div>
</body>
I would prefer not using jQuery or another library, but if it is too difficult then I will use it.
Thanks!

You can use offsetTop and offsetLeft to get the element's position (in px) relative to the page.
var posX = div.offsetLeft;
var posY = div.offsetTop;
div.style.position = 'absolute';
div.style.left = posX;
div.style.top = posY;
UPDATE
The values returned by offsetTop and offsetLeft do not include the transform:translate styles applied. I created a test case - its not dragable but it shows you how to calculate the relative positions by adding the offset and the translate values:
var div = document.getElementById("inserted_div_2");
var content = document.getElementById("content");
function testpos(){
var ol = div.offsetLeft,
ot = div.offsetTop,
cs = window.getComputedStyle(div, null),
tr = cs.getPropertyValue("-webkit-transform") ||
cs.getPropertyValue("-moz-transform") ||
cs.getPropertyValue("-ms-transform") ||
cs.getPropertyValue("-o-transform") ||
cs.getPropertyValue("transform") ||
false;
//outputs something like 'matrix(1, 0, 0, 1, 80, 90)'
var values = tr.replace(/[^0-9\.\,]/g,'').split(','),//split into array
tx = values[4] || 0,//take the x value (else 0)
ty = values[5] || 0;//take the y value (else 0)
//
content.innerHTML+=("<hr />position: "+div.style.position+"<br />");
content.innerHTML+=("offsetLeft:"+ol+", offsetTop:"+ot+"<br />");
content.innerHTML+=("translate-x:"+tx+", translate-y:"+ty+"<br />");
//so the actual position is the offset + the translate ==
var x = parseInt(ol) + parseInt(tx),
y = parseInt(ot) + parseInt(ty);
content.innerHTML+=("x:"+x+" y:"+y+"<br />");
}
/* TEST */
//1 set to fixed
div.style.position = 'fixed';
testpos();//test position
//2 move using transfor:translate
div.style.transform = 'translate(80px,90px)';
testpos();//test position (note the offset does not include the transform)
/3 set to absolute and get the position
div.style.position = 'absolute';
testpos();
http://jsfiddle.net/u3ay74bs/

you can use css for center div vertically and horizontally
for example
#content{
position:absolute;
width:100px;
height:100px;
left:50%;
top:50%;
margin-left:-50px; /*half width*/
margin-top:-50px; /*half height*/
}
<div id='content'>
...
</div>
if width equal 100px margin-left equal -50px
if width equal 200px margin-left equal -100px
and so on
margin-left half width
and
margin-top half height

finding the DOM scrollbar width

I would like to find the pixel width of the vertical and horizontal scrollbars.
I know that they are different for different OSes/browsers.
I found this code that attempts to detect it, but alas, it doesnt seem to work on IE7:
function scrollbarWidth() {
var scrollbarWidth = 0;
if ($.browser.msie) {
var $textarea1 = $('<textarea cols="10" rows="2"></textarea>')
.css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'),
$textarea2 = $('<textarea cols="10" rows="2" style="overflow: hidden;"></textarea>')
.css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body');
scrollbarWidth = $textarea1.width() - $textarea2.width() + 2; // + 2 for border offset
$textarea1.add($textarea2).remove();
} else {
var $div = $('<div />')
.css({ width: 100, height: 100, overflow: 'auto', position: 'absolute', top: -1000, left: -1000 })
.prependTo('body').append('<div />').find('div')
.css({ width: '100%', height: 200 });
scrollbarWidth = 100 - $div.width();
$div.parent().remove();
}
return scrollbarWidth;
}

This function should give you the width of the vertical scrollbar:
function scrollbarWidth()
{
var outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.width = "100px";
// for win 8
outer.style.msOverflowStyle = "scrollbar";
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;
}
The main steps of this function are the following:
Create an outer div of width 100px
Then forces the scrollbar to appear in the outer div
Create a new inner div and append inside the outer div. Set its height to 100%
Calculate the difference between both widths.
Similarly, you can also get both the width of the vertical scrollbar, and the height of the horizontal scrollbar, setting a given height to the outer div, and calculating also the height difference of both divs, like this:
function scrollbarWidthHeight()
{
var outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.height = "100px";
// for win 8
outer.style.msOverflowStyle = "scrollbar";
document.body.appendChild(outer);
var widthNoScroll = outer.offsetWidth;
var heightNoScroll = outer.offsetHeight;
// force scrollbars
outer.style.overflow = "scroll";
// add innerdiv
var inner = document.createElement("div");
inner.style.width = "100%";
inner.style.height = "100%";
outer.appendChild(inner);
var widthWithScroll = inner.offsetWidth;
var heightWithScroll = inner.offsetHeight;
// remove divs
outer.parentNode.removeChild(outer);
return {
width: widthNoScroll - widthWithScroll,
height: heightNoScroll - heightWithScroll
};
}
Tested in chrome, firefox, IE6, IE8, and safari.
It also uses native JavaScript (DOM functions), and doesn't use external dependencies like jQuery :)

Why are you trying to do this? Some context would be nice. If you're trying to make custom theme-able scrollbars, there are many scripts to do this, a good one being jQuery Scrollbars.