We Keep Coding

Coudn't scroll to end of the page using window.scrollTo

I am not able to scroll all the way until end. Following code stop working near the end of page.
I have used following methods to scroll programmatically,
// 1 still see scrolling left
window.scrollTo(x,y) > window.scrollTo(window.scrollWidth,0)
window.scrollBy(x,y) >
// 2
scrollingElement.scrollLeft = scrollingElement.scrollWidth - document.documentElement.clientWidth;
Info:
Some width related info for my case,
window.scrollWidth > 6180
scrollingElement.scrollWidth > 6183
document.documentElement.clientWidth > 412
Note: I have used webkitColumnGap css and turned vertical page into horizontal. That's why I have bigger scrollWidth.
If I use following (full scroll) I still see, there is some scrolling left and I can use mouse to scroll that part,
window.scrollTo(window.scrollWidth,0) // go to end
scrollingElement.scrollLeft = <full width> // go to end
// log scroll position for inpection ~ this number does not match the full width
window.scrollX ~ 4k
(window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0) ~ 4k
I have run out of ideas so would need help from you guys to find out the issue.
Browser details:
I am using flutter Webview in android device.
Edit:
After lot of trial and error adding following css fixed the issue, I don't why this fixed it?
body {
overflow: hidden !important;
}
Thanks.

You want to scroll to the bottom?
Try this:
var height = document.body.scrollHeight
window.scroll(0, height)
Hope i understood your question correctly

After lot of trial and error adding following css fixed the issue, I don't why this fixed it?
body {
overflow: hidden !important;
}
This means that some of your children elements bled out of its parent container. overflow: hidden tells the browser to cut out the parts that are not fitting inside the body container. That also means that this issue can be solved by changing the size or positioning of the body's children, and that would probably be a better approach to fixing the issue.
By default, overflow is set to visible, and therefore the browser allows you to see (and to scroll) outside of the containing box (overflow property explained)
The !important part tells the browser to artificially increase the specificity of this rule. For more details on specificity: css-tricks/sprecificity

Jquery width() Function Doesn't Return The Full Width of My Window

I am trying to get full size of my window(browser) which is 1366px. I use jquery width() function to achieve this. But It returns 1349px instead of 1366px. Therefore my slider appears 17px less than it should be. What did I do wrong you guys think?
var theWithObj = $('body').width();
console.log(theWithObj); //It returns 1349 but actual 100% size is 1366
Thank you!

Try
$(window).width();
If that's still not 1366 then you've probably calculated that number incorrectly - if you think you've calculated it correctly and jQuery's still wrong then please tell us how you came to find the width as 1366 :)

Using $(window).width() will give you the width of the browser (with or without srollbars)
If you use only $('body').width(), you'll get the width of the page only (so the width of the browser minus the width of the scrollbars.
alert($(window).width());
alert($('body').width());
FIDDLE

For solve the problem add this rule css:
body {overflow:hidden;}

OSX 10.7 $(window).width() returning the wrong value

I can't be the first to notice this but ever since 10.7 came out and they implemented the new style of scrollbars $(window).width() and $(window).height() no longer correctly return the size of the browser windows viewport....
Lets say you want to set a div the size of the browser window on load eh...
// load jquery //
<div id="bob">
</div>
<script>
$('#bob').width($(window).width()).height($(window).height());
</script>
and what ends up happening is something like this
To this I ask WTF?
here is an example of the issue
http://lab.aerotwist.com/webgl/a3/vertex-manipulation/

Do the elements containing #bob have margin or padding? If they do, that could be adding more space beyond the width and height of #bob, forcing scrollbars to appear.
If that's the problem, you could fix that by adding CSS like this:
html, body, #bob {
margin: 0;
padding: 0;
}

jQuery or javascript: Get dynamic div height in IE

This works in Firefox/Safari but not on IE
var h = parseInt($('#elementWhichHeightCanChange').css('height'));
alert(h);
on IE it returns NaN.
Anyone know how to get div height depending on its content on IE?
I want to resize this popup window to fit the content, which currently works only on Firefox.
Thank you in advance.

I have tried this, but it might work.
var h = $('#elementWhichHeightCanChange').height();
alert(h);
Use the height function or outerHeight instead of css height. You also won't need the parseInt() because this will return an integer, unlike css height.

Try this
var h = $('#elementWhichHeightCanChange').outerHeight();
alert(h);
This will include paddings and borders - things you probably want to take into account.

Adjusting elements based on scrollHeight using JQuery

Here's what i have so far:
function loadOff(){
$(document).ready(function(){
$("#eLoader").ajaxStop(function(){
$(this).hide();
$("#eventsContent").show();
var h = document.body.scrollHeight;
$("#bodyBackground").css("height",h+100+"px");
$("#sidePanel1").css("height",h-105+100+"px");
$("#bottom").css("top",h+100+"px");
});
});
}
This is a callback function for a JQuery ajax function, basically what is does is when all ajax is finished .ajaxStop() it hides the loader then shows the content.
The problem i am having is adjusting bodyBackground, sidePanel, and bottom to fit the content. I dont care to have it elastic and retract for short content at this point, i would just like it to extend to proper positioning based on content length.
All divs are absolutely positioned. The numbers in the function are broken down simply to make it easy to explain. -105 is the offsetTop of that element and +100 is the margin between the end of the content and the elements.
if there is a better, more efficient way to achieve this outcome, please, do tell.
Thanks.

Based on your code, the only thing you ought to see is the top 105px of #sidePanel1. Is that your intent? (h = the bottom of the window, according to your code.)
Sticking with the JQuery patterns, you would use
var h = $(window).height();
Maybe you're looking for this instead of the browser window's height? It will get the height of the content element.
$("#eventsContent").outerHeight();