We Keep Coding

SlickGrid.js viewport visibility toggling issues with Internet Explorer

I'm using SlickGrid.js library and it is excellent!
Only major problem right now is with Internet Explorer (confirmed in 9, 10, and 11), but the standards compliant browsers like Chrome and FF work fine.
Problem: When grid is scrolled and then hidden and then re-shown in IE the scroll position is reset to top of grid, and the viewport/data is either cut off or completely hidden (depending on scroll amount).
Here is a fiddle that demonstrates the SlickGrid.js IE bug (using the author's simple example 1):
http://jsfiddle.net/crwxoc17/1/
Anybody have a generic fix for this or patch to slick grid?
I can call grid.resizeCanvas() to sorta fix the issue, but it resets scrollbar to top and it's very annoying to do this for every single grid just to deal with Internet Explorer.
Semi-working fix, but still screws up the scrolltop:
function onShowGrid1() { grid.resizeCanvas(); }
(Reviewing JS code now, but I have not yet confirmed whether the bug is Microsoft's or SlickGrid's)

This issue applies to any element in IE with overflow set to scroll or auto and whose visibility is toggled. There's a simple example here: https://jsfiddle.net/qkhxL6r8/4/
That said, if you'd like the scrollTop position to be preserved you could extend SlickGrid or create a wrapper a class that subscribes to the onScroll event, records the scrollTop value, and sets it on the viewport element when showing or hiding the grid. I modified your example code as a proof of concept here: http://jsfiddle.net/h9cu2cmp/4/
var lastScrollTop;
var scrollTimeout;
function updateScrollTop(e, args){
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(function(){
lastScrollTop = args.scrollTop;
}, 30);
}
//...
grid.onScroll.subscribe(updateScrollTop);
$('body').on('click', '.toggle-button', function(){
$("#myGrid").toggle();
if(lastScrollTop !== undefined){
$("#myGrid").find('.slick-viewport').get(0).scrollTop = lastScrollTop;
}
});
If you're using a remote data provider you can trigger ensureData for the updated scrollTop with grid.onViewportChanged.notify()

jQuery scrollTop() not working on 'body' element in Firefox

I do not understand why the scrollTop() jquery function is not working on the 'body' element on Firefox.
$('body').scrollTop(0);
I fixed my issue using:
$(window).scrollTop(0);
However according to the jquery documentation scrollTop() is supposed to work on all elements like in this example:
$( "div.demo" ).scrollTop( 300 );
I have also tested with 'nav' and 'main' but it is not working either.

Scroll
$(window).scrollTop(0); seems to be supported by all browsers IE9+ (maybe IE8 but I don't test on that any more).
Animated Scroll
If you want to animate a scroll, jQuery returns an error if using the window object (1.11.2 tested). Instead, to animate a scroll, it's best to use both html and body to cover engines which utilise either one. So:
$('html, body').animate({scrollTop:0},500); will scroll to the top of the browser in half a second.
Scroll Position
You cannot use $('html,body').scrollTop() to find the current scroll position of the page - at least Chrome doesn't support this (always returns 0). Instead, to consistently find the scroll position of a page, it's necessary to use $(window).scrollTop();.

Use window if you want consistency between browsers.
$(window).scrollTop();

try this:
your div to scroll:
<div id="top"></div>
and scroll top js:
$('html,body').animate({scrollTop: $('#top').offset().top},'slow');

Very Simple Code , working 100%
$('body, html').scrollTop(0);

window.scrollBy fires before hash/anchor scroll in Chrome and Safari

Here's a frustrating problem. I use the following in script inside of a jQuery load block:
window.scrollBy(0,-100);
I do it because I set a div to be fixed at the top of the page through scrolling, and this line will compensate so that the anchor you've clicked to (http://page.html#foo) is seen where it should be.
It works great in Firefox. In Chrome and Safari, it doesn't, because the load event appears to happen before the browser scrolls to the anchor.
Any suggestions?

I came across into the same problem, and this is my work out. (A hack actually)
// Clicking on the navigation bar
$('.navbar-nav a').click(function(e) {
// Blocking default clicking event
e.preventDefault();
// Scroll to the anchored element with a delay
setTimeout(function() {$('#talks')[0].scrollIntoView();}, 5);
// Compensate the scrolling with another delay
setTimeout(function() {scrollBy(0, -$('#info').height())}, 10);
}
It seems like it's a Safari bug.

I also came across this problem. Using a timeout, even 0 ms, seems to work without visible jumping. Try this:
window.setTimeout()
{
window.scrollBy(0, -100);
}, 0);

scrollTop() returns 0 in chrome

I want to check if page is scrolled after it has finished loading and I'm using this code:
$(document).ready(function(){
alert($(window).scrollTop());
});
It works well in Firefox but allways returns 0 in Chrome. Why is this?

Actually Firefox is the only browser that doesn't return 0 for $(window).scrollTop() on domReady or window.onload. Chrome, Safari and IE all return 0. The only safe way to get correct position of scrollbar on domReady is, as mentioned in another answer above, to set an event handler on window's scroll event as below:
$(document).ready(function(){
$(window).scroll(function() {
console.log($(window).scrollTop());
$(window).unbind('scroll');
});
});

$(window).scrollTop() will return 0 when the window isn't scrollable.

The chrome restores the pre-refresh scroll position once the DOM is loaded. So, getting scrollTop on scroll event instead of ready event will work.

I also had the problem that scrollTop() always returned 0 in Chrome, whether I used it on window, on document or on 'html,body'. I finally found out that css was the problem:
html, body {
height: 100%;
overflow-x: hidden;
}
Actually, I don't know exactly why because you can remove parts of this code and then it works again. Strange but problem solved ;)

Try the following code in a page that has some text and a link in the bottom of the page. Remember to have enough text or blank lines in order to make a scroll of the page until you can see the my button
$(document).ready(function () {
alert($(window).scrollTop()); // first load if you did not scroll = 0
$("#button").click(function () { alert($(window).scrollTop()); });
// hitting the button that is located on bottom of page
// - i had to scroll the page = xxx (68 in may case)
});
It is normal in your case to get 0 because the page is not scrolled, the offset between your position and the top of the page is 0.
I tried in Chrome, FF6, IE9.
I hope i was helpful.

I had the same problem but got fixed by adding the document declaration:
<!DOCTYPE html>

Inconsistent jQuery function when resizing elements on page load

Ahoy!
I've built a little script to check the size of the left-hand margin on page load, resize a div there to fill it, and change the header div to float next to it.
Here's the code:
function buildHeader() {
var containerMarginLeft = $(".container_16:not(:first)").css("margin-left");
var headerHeight = $("#header").height();
$("#stripe").width(containerMarginLeft).height(headerHeight).css("float", "left");
$(".container_16:first").css("float", "left");
$("#header").css("margin-left", 0).width(950);
}
$(document).ready(function(){
// Manipulate layout for the first time
buildHeader();
// Manipulate layout when window is resized
var resizeTimer = null;
$(window).bind('resize', function() {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(buildHeader, 100);
});
});
And the demonstration is here: http://robertmay.me.uk/mockups/plane.html (it creates the line that stretches on the left).
Now, it works in webkit browsers. It doesn't work in Mozilla, and I've not even tried it in IE.
Anyone have any ideas as to why it doesn't seem to work in Mozilla? I have a feeling it might have something to do with the CSS.

$(".container_16:not(:first)").css("margin-left");
This line gives a result of '0px' in Firefox regardless of how wide the window gets. However, Firebug Lite in Safari shows this value as changing depending on the width of the window.
The problem seems to be with the .css('margin-left') part of the statement, since $(".container_16:not(:first)") returns the same element in both browsers. Indeed, Firebug in Firefox shows the Computed Style for this element as having '0px' for marginLeft and marginRight, but this is non-zero in Safari.
As expected, changing from 'margin-left' to 'marginLeft' makes no difference, nor does accessing the attribute directly, like $(".container_16:not(:first)")[0].style.marginLeft, because Firefox is computing it wrong in the first place.
Sorry I don't have an answer, but hopefully this will lead you in the right direction. For me though I would try to align the layout using just CSS, resorting to JavaScript fixes only as a last resort.