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

Fake position Fixed inside a Div but relative to window top, while scrolling

I had to fake a fixed position of a div inside its container but relative to window by giving it an absolute position and giving it the top value in with jquery's scrollTop(). So far it seems like a decent solution but the fixed effect only work in Chrome. In firefox and ie10 it moves slowly and ie9 it do something like vibrate
if ($.browser.webkit) {
//First I had to do some hack in order to get the scrollTop() same return in all browsers
var bodyPos = $('body').scrollTop();
}else{
var bodyPos = $('html, body').scrollTop();
}
//then I can calculate the point relative to the top of the window
var pos1 = $('#four').position().top;
var imgPos = bodyPos - pos1
$('#fixed1').css({'top': imgPos})
Anybody knows how to make this effect crossbrowser?
Thanks

I've finally fixed, as you see in this case I wanted to make a fake fixed position of an image inside it's container while scrolling.
Well, Occam's Razor:
I created a container for the image and give it an absolute position width height 100% and top 0.
Then I set the image as background of the container with fixed attachment "et voilà" the job is done.
Sometimes this kind of things happen :)

Can someone explain why this code works-making div stick to top after scoll?

I love that this code works, but I cannot, for anything, wrap my head around WHY it's working?
Here is the jfidddle
Here is the code:
jQuery(document).ready(function($) {
clone = $('div').clone();
$('div').after(clone);
$('div:last').hide();
offset = $('div:first').offset();
var fromtop = offset.top;
$(document).scroll(function() {
doc = $(this);
dist = $(this).scrollTop();
if (dist >= fromtop) {
$('div:last').show();
$('div:first').css({
'position': 'fixed'
});
} else {
$('div:first').css({
'position': 'static'
});
$('div:last').hide();
}
});
});
I guess I am not understanding how scrolltop and offset are interacting or what they REALLY are, as in their true positions on the page. The code says if ScrollTop (the scrollbar position?) is higher than the value of the div's offsettop , then make the div sticky. But if ScrollTop is the position of the scrollbar, isn't it true that sometimes the scroll bar position could be lower than the div's position BEFORE the div is at the top of the page? What is it about being at the top of the page (offsettop of 0?)--and only at the top of the page, never before-- that makes offsettop a smaller value than scrolltop?
Really confused, and I don't want to just copy the code without understanding what it's really doing.

scroll Top is actually how many pixels 'up' the page has moved (or how many pixels you have moved down the page)
Basically all that happens is the .offset sees how far down the page (from the top of the page) the 'sticky' menu is
When you scroll to that point the bar becomes fixed (which is basically relative to the window instead of the document)
When you scroll back up it just switches back to being positioned in the document.
For clarity
.offset = 200px say - this is how far down the document the sticky menu is
.scrollTop - is 0 when the page loads
When you scroll down the page 201px
.scrollTop > .offSet -> so make the bar fixed (remember fixed is relative to the window - not the document)
If you scroll back up the process is reversed.

It's actually very simple. Let me try if I can make it a bit clear to you:
Whenever you want something (let's say some div) to get fixed on top as you scroll down, you need two things:
You need the current vertical position of your div. And you calculate that by using offset().top
You need to track how much user has scrolled. And you calculate that by using scrollTop()
So in your case, if the current position of your div is top: 100, then as soon as your scrollbar reaches the number 101, your div will get the class of .fixed
By default, the scrollbar vertical position is 0 when the page loads.

Get distance of window from the top of document on page load (javascript only)

I've been having trouble calculating this on page load. It should only take one line but I can't seem to get it.

could you elaborate on what the "distance of window to document" means? if you are looking for screen height/width:
window.screen.height
window.screen.width
or
window.screen.availHeight
window.screen.availWidth
for vertical scroll position use:
window.pageYOffset
window.scrollY
I'm pretty sure they are equivalent i.e.
window.pageYOffset == window.scrollY; // always true

DSOC (document scroll offset coordinates) can be found with window.pageXOffset and window.pageYOffset. In your case, you want window.pageYOffset.
More details here:
http://www.javascriptkit.com/javatutors/static2.shtml

I realize that this is an old question, but I had the same problem and sought out a way to fix it. It appears that window.scrollY is not set directly on page load. However, if you do the following, it will register the correct value:
window.setTimeout(function() { console.log(window.scrollY); }, 10);
I've determined that the extra 10ms allows for the document to load and for it to set the window.scrollY value.

How do I easily find the distance between a point on the page and the bottom of the browser window using JavaScript?

A view in my web app has a table which may be extremely long, so I wrapped it in a div with overflow: auto; max-height: 400px; so users can scroll through it while keeping the other controls on the page visible.
I want to use a bit of JavaScript to dynamically adjust the max-height CSS property so the div stretches to the bottom of the browser window. How can I determine this value? jQuery solutions are fine.
The table doesn't start at the top of the page, so I can't just set the height to 100%.

Something like this would work I think:
var topOfDiv = $('#divID').offset().top;
var bottomOfVisibleWindow = $(window).height();
$('#divID').css('max-height', bottomOfVisibleWindow - topOfDiv - 100);

I had a very similar problem, except in my case I had a dynamic pop-up element (a jQuery UI Multiselect widget), to which I wanted to apply a max-height so that it never went below the bottom of the page. Using offset().top on the target element wasn't enough, because that returns the x coordinate relative to the document, and not the vertical scroll-position of the page.
So if the user scrolls down the page, the offset().top won't provide an accurate description of where they are relative to the bottom of the window - you'll need to determine the scroll position of the page.
var scrollPosition = $('body').scrollTop();
var elementOffset = $('#element').offset().top;
var elementDistance = (elementOffset - scrollPosition);
var windowHeight = $(window).height();
$('#element').css({'max-height': windowHeight - elementDistance});

window.innerHeight gives you the visible height of the entire window. I did something almost identical recently so I'm pretty sure that's what you need. :) Let me know, though.
EDIT: You'll still need the Y-value of the overflowed div which you can get by document.getElementById("some_div_id").offsetHeight, seeing that .style.top won't give you a result unless it has been specifically set to a point via CSS. .offsetHeight should give you the correct 'top' value.
Then it's just a matter of setting the size of the table to the window height, minus the 'top' value of the div, minus whatever arbitrary wiggle room you want for other content.

something like max-height: 100%, but not to forget the html and body height 100%.