Is there a way to disable the behavior where some modern browsers (Chrome and Safari) remember your scroll position on a page refresh?
For browsers that support history.scrollRestoration, the auto scroll behavior can be turned off:
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
source: https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration
Have you tried firing this after document is ready?
$(document).ready(function(){
window.scrollTo(0, 0);
});
if that does not work...
$(document).ready(function(){
setTimeout(function(){
window.scrollTo(0, 0);
}, 1);
});
Which will push this to the bottom of the call stack
not just for chrome,but for all i think this will work well.
window.onload = function () {
window.scrollTo(0, 0);
};
After update of your question:
I think its better if we use some cookies or session storage.
Instead of hoping a setTimout ends up at the bottom of the stack - I rather enforce it that we hit the scroll position we want. I still consider this a hack, I was hoping for some kind of browser event we bind to.
var scrollToYPos = 100;
var interval = setInterval(checkPos, 0);
function checkPos() {
if ($(window).scrollTop() == scrollToYPos) {
clearInterval(interval);
} else {
window.scrollTo( 0, scrollToYPos );
checkPos();
}
}
I encountered this same issue. Here's the basic solution I came up with:
// scroll the user to the comments section if we need to
wt = win.scrollTop();
wb = wt + win.height();
// if scroll position is 0, do this (it's a fresh user), otherwise
// the browser is likely to resume the user's scroll position, in
// which case we don't want to do this
yab.loaded().done(function() {
// it seems that browsers (consistently) set the scroll position after
// page load. Accordingly wait a 1/4 second (I haven't tested this to the lowest
// possible timeout) before triggering our logic
setTimeout(function() {
// if the window top is 0, scroll the user, otherwise the browser restored
// the users scroll position (I realize this fails if the users scroll position was 0)
if(wt === 0) {
p = self.container.offset().top;
if(wb != p) {
win.scrollTop(p - th - 20);
}
}
}, 250);
});
I think the easiest way would be to trick the browser into a reload that it thinks is a new page.
window.location = window.location
All the browsers I've tested this in it works consistently. I would personally stay away from onload callbacks as they can cause jumps during load that aren't too visually appealing.
Related
I have created the following application using iScroll: http://preview.na-software.co.uk/Demo/FutureLearning4/#/section-0
As the user flicks left and right or clicks the arrows in the bottom corners, the application moves the content sections it updates the history by changing the hash so that the user can move back and forth to other sections and bookmark them etc.
However! If you access a hash like: http://preview.na-software.co.uk/Demo/FutureLearning4/#/section-2 and then navigate a few sections and then use the back buttons two issues happen:
1.) It scrolls to the first screen (even though currentSection is correct, and iScroll has been told the correct section).
2.) If you click the back or forward button multiple times, you stop the animation and cause it to become confused and stick in between two sections.
Looking into the code, and seeing that the correct indexes and elements are being passed to iScroll on hashchange, and console logging out the offsets, I've discovered the issue is cause because the offsets are incorrectly set... however just doing refresh() won't fix the issue, as it will then reset the position.
Can anyone see where the problem is or see a way to fix this?
I should note that this bug ONLY happens if you come into the application on a URL that isn't section 0 and then scroll around the application. This is because the offsets will be created correctly by your interactions. But if you come into a URL like section 3, then the offsets will be incorrect and so the hashchanges don't work correctly, if that makes sense.
The hashchange method looks like:
// handle hashchange events
$(window).hashchange( function(){
// read the hash to find out what the new section number is
var nums = location.href.match(/(section)-\d+/g).map(
function(x){ return +x.replace(/\D/g,"") }
);
// set currentSection
currentSection = nums[0];
// if the hashchange was called by user scrolling
if(hashCalledByScroll){
// no need to anything as they have already updated hash and scrolled
hashCalledByScroll = false;
} else {
// find the section to scrollTo
sectionToScrollTo = $('#horizontal > .sections > .section').eq(currentSection).attr('id');
// tell iscroll to scroll to the section
horizontal.scrollToElement( '#' + sectionToScrollTo, null, null, true );
}
// hide the menu on hashchange
hideMenu();
});
Testing your site, I noticed the following: Whenever I access the site via section-3 and then enter the url for section-2, the navigation would instead send me to section-0.
I believe this is the same behaviour as you are experiencing in 1).
So I investigated and came to the following analysis:
In the function horizontal.scrollToElement( '#' + sectionToScrollTo, null, null, true )
iScroll retrieves the utils.offset(el) [iScroll.js#772] for the given el-ement. This offset tells it, where the element to scroll to is.
iScroll goes through the element and all of its offsetParents to add up their offsets. This is where things are breaking: <div class="sections"> has a negative offset to its parent, which imho it should not have.
This, in turn, messes up the scrollTo-coordinates.
To see what I am talking about: document.querySelector('.sections').offsetLeft
This has all just been analysis. My approach to fix this would be to avoid scrollToElement() and instead use scrollTo():
...
} else {
// find the section to scrollTo
sectionToScrollTo = $('#horizontal > .sections > .section').eq(currentSection).attr('id');
// tell iscroll to scroll to the section
var posLeft = -$('#' + sectionToScrollTo)[0].offsetLeft;
var posTop = -$('#' + sectionToScrollTo)[0].offsetTop;
horizontal.scrollTo(posLeft, posTop, 1000);
}
// hide the menu on hashchange
hideMenu();
});
Thus, just calculate the location of the section you want to go to yourself.
About 2) I am not sure if there is much one can do about it. Jumping around quickly breaks a lot of carousels. Maybe a delayed callback to scrollEnd, verifying the validity of the current state.
Another thing I noticed is that you can accidentally stop the transition. Try to click, hold and release the cursor midway a transition - you need to be quick.
Hope this helps.
Found not best solution and it doesn't solve main problem, but it works.
$(window).hashchange(function () {
if (hashCalledByScroll) {
hashCalledByScroll = false;
} else {
var hpage = window.location.hash;
var hpage = hpage.replace('#/section-', ''); //get number of target page
var cpage = currentSection; //number of current page
var count = parseInt(hpage) - parseInt(cpage); //difference
while (count > 0) { //if difference positive: go forward count-times
horizontal.next();
count--;
}
while (count < 0) { //if difference negative: go backward count-times
horizontal.prev();
count++;
}
}
hideMenu();
});
FIDDLE
jsFiddle
Trying to vertically scroll the div child in Google Chrome, arrived at the end, if you try to continue the scroll is also scrolled the div parent, which does not happen with Mozilla. How to fix it?
With jquery you can disable the overflow when mouse is over the child div.
This way works on Firefox 24 for Mint, and Chromium 28...
http://jsfiddle.net/JcUxs/2/
$('.child').on('mouseover',function(){
$(this).parent().addClass('fixoverflow');
});
$('.child').on('mouseleave',function(){
$(this).parent().removeClass('fixoverflow');
});
css:
.fixoverflow{
overflow: hidden
}
I think that this is the best solution I can achieve (It took 1 hour to understand that the scroll event and the wheel is getting trigger both):
I used flag variable to keep the scroller position.
I used jquery and I noticed just now from the comments that you asked for pure javascript.
Anyway jquery bases on native javascript so I'll edit my answer later and translate it to pure code.
Just confirm that it's good enough for you and i'll translate it.
JavscriptCode:
var isCanceled = false;
var currentPos = $(".parent").scrollTop();
var stopWheelTimer = undefined;
$(".child").on('mousewheel', function (event) {
clearTimeout(stopWheelTimer);
event.stopPropagation();
isCanceled = true;
currentPos = $(".parent").scrollTop();
stopWheelTimer = setTimeout(function(){
isCanceled = false;
}, 250);
});
$(".parent").on('mousewheel', function (elem) {
if(isCanceled)
{
$(elem.target).scrollTop(currentPos);
}
});
$(".parent").on('scroll', function (elem) {
if(isCanceled)
{
$(elem.target).scrollTop(currentPos);
}
});
Working Example:
jsFiddle
I have a flash object inside a div, that will zoom it's content when I scroll over it. the problem is that my page also scrolls and I don't know how to fix this problem. I need the page to stand still when I scroll over the flash.
I tried adding this
flashContainer.bind('mousewheel DOMMouseScroll', function(e) {
var scrollTo = null;
if (e.type === 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
} else if (e.type === 'DOMMouseScroll') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
but because of preventDefault, the flash object won't zoom anymore.
Do you have any suggestions?
may be this could work for you:
$("element").hover(function(){
var scrollT = $(document).scrollTop();
$(document).on("scroll", function(e){
$(document).scrollTop(scrollT);
});
}, function(){
$(document).off("scroll");
});
http://jsfiddle.net/ZFsDY/3/
I stumbled on this issue a few months ago (the old method we used to manage scrolling didn't work on the most recent browsers).
I'm not allowed to publish the code for it, but here a few note on how we did it.
Like in reyaner's answer, we use event listening and preventDefault() to disable the browser auto scrolling, and get the scroll value (but without scrollTop()).
Once we have the value, we send it to the Flash via ExternalInterface.
For it to be possible, the flash object must beforehand add a Callback, a Flash method that can be called by Javascript.
We added a couple of additional interaction between Flash and JS so that the scroll is locked only when the Flash has the focus.
A warning : all browser don't have the same scale for the wheelDelta, and you may find that the zoom speed can vary. To fix this we decided to always use a fixed step each time the event is dispatched, instead that using the delta as-is.
another try:
$("element").bind( 'mousewheel DOMMouseScroll', function ( e ) {
var d = e.wheelDelta || -e.detail;
var s;
if(d < 0) s = 1;
else s = -1;
this.scrollTop += s * 30;
e.preventDefault();
});
http://jsfiddle.net/ZFsDY/5/
I needed to be able to load a particular page in an iframe on demand, so I used a simple wrapper:
function updateFrame(url) {
frames[0].location = url;
}
Then I was asked to load the page to a particular point, which was non-trivial, since the pages were not within my control and there weren't always <a name> anchors to rely on. So some poking around showed that IDs could be used as anchors.
That is to say, you can scroll to <div id = "somewhere-down-the-line"> with:
updateFrame("http://host/page#somewhere-down-the-line");
except this call also scrolls the entire viewport up so that the above <div> goes to the top and everything in the parent page above it scrolls out of view.
How do I modify updateFrame(url) so that it scrolls the page within the <iframe> but leaves the rest of the page as it is?
This hack worked for me on Firefox 20.0.1/Windows. Essentially, I load the page first, then jump to the target:
function updateFrame(url) {
if (url.indexOf('#') > -1) {
mainPage = url.split('#')[0];
frames[0].location = mainPage;
}
frames[0].location = url;
}
I would like to be able to use this in other browsers as well. I have been trying to get it to work in Chrome. Maybe I'll even try Internet Explorer...
If a hack is ok, and what you're looking for is cross-browser try using scrollTop to reset where you were.
E.g. if it is the body that scrolls
function updateFrame(url) {
//save where you were
var oldScroll = document.body.scrollTop;
//this moves our body!
frames[0].location = url;
//move it back
document.body.scrollTop = oldScroll;
}
Of course if it doesn't actually scrolls the entire viewport and instead modifies a parent div or something, the scrollTop property will be on that element too.
Let me know if this works, but screws up the scrolling on the frame, because I can modify this to account for a difference between the two scrollTops
You could try turning the bolts yourself by detecting the height of the element you want, and forcing the scrollTop of the frame.
function updateFrame(url) {
//get the parts
var parts = url.split('#');
//go to the url
frames[0].location = parts[0];
//if there was an anchor
var anchor;
if (parts.length > 0 && parts[1].length > 0) {
//may want to account for a[name="PARTS[1]"] too
anchor = frames[0].document.getElementById(parts[1]);
//set the scroll of it yourself, using some sort of library to get "fullTop"
frames[0].document.body.scrollTop = anchor.fullTop();
}
}
Where "fullTop" is equivalent to the distance between the top of the iframe, and the element.
Like jQuery's .offset() or YUI's getXY(el).[1]
What worked for me on Firefox 20.0.1/Windows. Essentially, I load the page first, then jump to the target:
function updateFrame(url) {
if (url.indexOf('#') > -1) {
mainPage = url.split('#')[0];
frames[0].location = mainPage;
}
frames[0].location = url;
}
On Chrome 28.0/Windows, calling updateFrame(url) followed by setting document.body.scrollTop = 0 (thanks to this answer) had the desired effect, though only in the console. I am still testing on other browsers; a more elegant solution is always appreciated :)
As mentioned in the question, though, I would like to be able to use this in other browsers as well. Maybe I'll even try Internet Explorer...
how can I disable or hide address bar and back and forward buttons in ie and firefox
i tried lots of links and solutions but non of them worked
for example for disabling back button:
<script type = "text/javascript" >
function changeHashOnLoad() {
window.location.href += "#";
setTimeout("changeHashAgain()", "50");
}
function changeHashAgain() {
window.location.href += "1";
}
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
window.location.hash = storedHash;
}
}, 50);
but it seems that it goes to previous page then it returns
and i trid :
window.scrollTo(0, 0); // reset in case prev not scrolled
var nPageH = $(document).height();
var nViewH = window.outerHeight;
if (nViewH > nPageH) {
nViewH -= 250;
$('BODY').css('height', nViewH + 'px');
}
window.scrollTo(0, 1);
}
for disabling menu bar but it didnt work
what can i do
Instead of disabling the back button, try to make your page that supports users to going back. It will increase the usability of your application.
Even you can impliment it for the ajax activities also.
Don't think you can disable buttons on browser. I mean, otherwise, we'd seen it on spyware infected sites...
In terms of hiding them, I've seen banks use a full screen popup without those buttons (but hardware button on mouse or hitting backspace still works).
Not tested but you can bind to the window's hashchange event.
For example, in jQuery it very easy to do:
$(window).bind('hashchange', function(e)
{
e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
return false; // stop event
});
The result is that the back button not changes the page when an anchor is in the url. But i agree with the first answer also (it is not a real answer i think, it is an advice).
You can also override the last entry in window.history, so user can't go back.