I'm trying to handle a long list of <div>s and maintain scroll position in the list after navigating off and coming back. Essentially when a selection made is in the list I capture the listScrollPos and then try to reset it when I'm returning to the page (in Angular - so the list is re-rendered first).
vm.getAlbums = function() {
albumService.getAlbums()
.success(function (data) {
vm.albums = data;
$timeout(function () {
if (albumService.listScrollPos) {
$("#MainView").scrollTop(albumService.listScrollPos);
albumService.listScrollPos = 0;
}
}, 50); // delay required
})
.error(function(err) {
vm.error.error(err.message);
});
};
The process works fine in all browsers I tested - except on iOS in a WebView (Safari works fine). In other browsers the list displays and the scroll position is moved after the initial render. The pointer resets and all is good.
However, on iOS 8 either in Safari or a Web View in Cordova, the div turns white and shows 'empty'. If I touch the div anywhere it immediately displays at the correct scroll position.
IOW, the DOM appears to be updated and rendered, but the browser is somehow optimizing the scrolled content that was moved under program control.
Is there any way to force the browser to re-render the element after the scroll position was moved programmatically?
Ok, so after a bit more checking the problem is definitely isolated to the iOS WebView - Safari on iOS works fine without any of the following. But a Cordova app or a pinned iOS app exhibits this 'white out' behavior.
The workaround is to explicitly force the DOM to re-render the element using the 'scrollHeight reading trick'.
Here's the code that works:
vm.getAlbums = function() {
albumService.getAlbums()
.success(function (data) {
vm.albums = data;
setTimeout(function () {
if (albumService.listScrollPos) {
var el = $("#MainView");
el.scrollTop(albumService.listScrollPos);
albumService.listScrollPos = 0;
$timeout(function() {
var t = el[0].scrollHeight;
}, 1);
}
}, 1); // delay around animation 900
})
};
Notice the last $timeout() block that simply reads the scrollHeight of the element, which forces the re-render and properly displays the result.
There's a little jumpiness due to the slight rendering delay.
Related
enter code here I have setup navigation links to smooth scroll to an anchor point on my page.
Unfortunately I always have to click twice on every link for the anchor to move.
I think the smooth scroll javascript I'm using is causing the problem. but I don't know anything about java script and I have just copy/pasted this code from somewhere.
I'd be appreciative if you could help me understand, which part of this code is causing the problem.
//Smooth Scroll for Page Anchor
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
I understand that I can call the following code on Turbolinks 5 but it changes the scroll position. Is there a way to call Turbolinks to refresh the page and not change the scroll position?
Turbolinks.visit(location.toString());
This will do what I want, but was hoping to use Turbolinks
window.location.reload()
Store the current scroll position before calling visit, then when the page loads, scroll to that stored position. Resetting the stored scroll position to null ensures that subsequent page loads will not scroll to an old position. One possible implementation might be:
var reloadWithTurbolinks = (function () {
var scrollPosition
function reload () {
scrollPosition = [window.scrollX, window.scrollY]
Turbolinks.visit(window.location.toString(), { action: 'replace' })
}
document.addEventListener('turbolinks:load', function () {
if (scrollPosition) {
window.scrollTo.apply(window, scrollPosition)
scrollPosition = null
}
})
return reload
})()
Then you can call reloadWithTurbolinks().
To prevent the page from flickering as it scrolls from the top to the desired position, add the no-preview cache directive in the page's head:
<meta name="turbolinks-cache-control" content="no-preview">
It's bene a while, not sure if you would still need a solution. You can try this, which disable/enable scrolling before and after loading page content:
Turbolinks.enableTransitionCache(true);
Turbolinks.visit(location.toString());
Turbolinks.enableTransitionCache(false);
My answer is based on Dom Christie's answer, with restored focus after reload and getting the scrollPosition just before rendering.
Store the current scroll position and active field item before rendering the new page, then after the the is rendered, scroll to that stored position and restore the focus. Resetting the stored scroll position and focusId to null ensures that subsequent page loads will not scroll to an old position/ Focus.
Note that the fields must have assigned ids in order to recover the focus.
var reloadWithTurbolinks = (function () {
var scrollPosition;
var focusId;
function reload() {
Turbolinks.visit(window.location.toString(), {action: 'replace'})
}
document.addEventListener('turbolinks:before-render', function () {
scrollPosition = [window.scrollX, window.scrollY];
focusId = document.activeElement.id;
});
document.addEventListener('turbolinks:load', function () {
if (scrollPosition) {
window.scrollTo.apply(window, scrollPosition);
scrollPosition = null
}
if (focusId) {
document.getElementById(focusId).focus();
focusId = null;
}
});
return reload;
})();
Then you can call it like this:
setInterval(function () {
reloadWithTurbolinks();
}, 3000);
I combined it with the 'data-turbolinks-permanent' attribute on the form. I also use <meta name="turbolinks-cache-control" content="no-preview">.
What I have currently is a very simple div that has a flexcroll scroll bar. This simple div contains some draggable itmes inside of it. My goal is to be able to drag one of the items and and move it about without the flexcroll scroll bar moving.
As it stands right now if I were to drag one of the items below the viewable area the simple div will scroll down. I would like to prevent this.
I'm using jQuery UI for the draggable items. I've already tried using the option "scroll:false" but this does not work for flexcroll.
I'm sorry I don't have any example code, I'm currently away from my work computer.
flexcroll: http://www.hesido.com/web.php?page=customscrollbar
I don't know if you have already resolved this problem. This morning, I have the same problem and I found your post. After that, I have googled a lot to find a solution without any lucky. So finally, I decided to do someting myself, I hope my idea will help you.
After read the Programming Guid, I found that in this version (2.0) of flexcroll, we could register a function for onfleXcroll whose description could be found by searching the keyword "Pseudo-event: onfleXcroll". This is to say that the method will be executed after a scroll is done. So here, what I restore the "top" style with the value before you drag an element.
Here are the code
var $assetswrapper; // This variable indicates the contentwrapper of you div.
var $assetsscrollbar; // This variable indicates the vscroller of you div.
window.onfleXcrollRun = function () { // This method will be executed as soon as the div has been rendered with the help of flexcroll
// You could find these two divs by using firebug, because the top value of these two divs will be changed when we scroll the div which use the class .flexcroll.
$assetswrapper = $('#contentwrapper');
$assetsscrollbar = $('#vscrollerbar');
}
var wrapperTopPosition = 0; // This is used to stock the top value of the wrapperContent before dragging.
var scrollbarTopPosition = 0; // This is used to stock the top value of the scrollbar before dragging.
var dragged; // This is a boolean variable which is used for indicating whether the draggable element has been dragged.
var dropped = false; // This is a boolean variable which used to say whether the draggable element has been dropped.
$('.draggable').draggable({ // you could change .draggable with any element.
start: function (event, ui) {
// Your code here.
wrapperTopPosition = $assetswrapper.position().top;
scrollbarTopPosition = $assetsscrollbar.position().top
dragged = true;
},
stop: function (event, ui) {
// Your code here.
dragged = false;
dropped = true;
}
});
$('your drag div')[0].onfleXcroll = function () { // This method will be called each time when a scroll has been done.
if (dragged) {
$assetswrapper.css('top', wrapperTopPosition);
$assetsscrollbar.css('top', scrollbarTopPosition);
} else {
// Code here is used for keeping the top position as before even though you have dragged an element out of this div for a long time.
// You could test the scrollbar without this piece of code, if you drag an element out of the div for a long time, the scrollbar will keep its position,
// but after you dropped this element and try to scroll the div, then the scrollbar will reach the end of the div. To solve this problem,
// I have introduced the method setScrollPos with the old top position plus 72. 72 here is to set the scroll increment for this scroll, I know
// this value is not fit for any size of windows, but I don't know how to get the scroll-increment automatically.
if (dropped) {
dropped = false;
$('your drag div')[0].fleXcroll.setScrollPos(false, Math.abs(wrapperTopPosition) + 72);
$('your drag div')[0].fleXcroll.setScrollPos(false, Math.abs(wrapperTopPosition) + 72);
}
}
};
I hope this could give you a help if you haven't found any solution yet.
I have an asp.net web site I am building to be supported on ipad. When I focus on an input element and the keyboard pops up, the position fixed header div(which normally scrolls along with the page) will pop up the page a distance equivalent to the amount the keyboard takes up and freeze there for the duration of the input process. Once the keyboard is dropped back down, the div snaps back into place and behaves normally again. I am testing on iOS5 so position: fixed should be supported.
Is this a known issue? Has someone come across this and dealt with it before? I can't seem to find anything on this.
Fixed positioning is broken on iOS5/iOS6/iOS7.
Edit 3: See link to a working fix near end of this answer for iOS8.
Position:fixed is broken when either:
a) the page is zoomed
or
b) the keyboard shows on the iPad/iPhone (due to an input getting focus).
You can view the bugs yourself in jsbin.com/icibaz/3 by opening the link and zooming, or giving the input focus. You can edit the edit the html yourself.
Notes about bugs (a) and (b):
A fixed div with top: 0px; left: 0px; will show in the wrong position (above or below the top of the screen) when an input gets focus and the keyboard shows.
The problem seems to have something to do with the auto-centering of the input on the screen (changing window.pageYOffset).
It appears to be a calculation fault, and not a redraw fault: if you force the top: to change (e.g. switching between 0px and 1px) on the onScroll event, you can see the fixed div move by a pixel, but it remains in the wrong place.
One solution I used previously is to hide the fixed div when an input gets focus - see the other Answer I wrote.
The fixed div seems to becomes stuck at the same absolute position on the page it was at at the time when the keyboard opened.
So perhaps change the div to absolute positioning when an input has focus? Edit 3: see comment at bottom using this solution. Or perhaps save the pageXOffset/pageYOffset values before the keyboard is opened, and in an onScroll event calculate the difference between those values and the current pageXOffset/pageYOffset values (current once the keyboard is opened), and offset the fixed div by that difference.
There appears to be a different problem with fixed positioning if the page is zoomed - try it here (Also good information here about Android support for fixed in comments).
Edit 1: To reproduce use jsbin (not jsfiddle) and use the fullscreen view of jsbin (not the edit page). Avoid jsfiddle (and edit view of jsbin) because they put the code inside an iframe which causes interference with fixed positioning and pageYOffset.
Edit 2: iOS 6 and iOS 7 Mobile Safari position:fixed; still has the same issues - presumably they are by design!.
Edit 3: A working solution for (b) is when the input get focus, change the header to absolute positioning and then set the header top on the page scroll event for example. This solution:
Uses fixed positioning when input not focused (using window.onscroll has terrible jitter).
Don't allow pinch-zoom (avoid bug (a) above).
Uses absolute positioning and window.pageYOffset once an input gets focus (so header is correctly positioned).
If scrolled while input has focus, set style.top to equal pageYOffset (header will jitter somewhat due to onscroll event delay even on iOS8).
If using UIWebView within an App on iOS8, or using <=iOS7, if scrolling when input has focus, header will be super jittery because onscroll is not fired till scroll finishes.
Go back to fixed position header once input loses focus (Example uses input.onblur, but probably tider to use
document.body.onfocus).
Beware usability fail that if header too large, the input can be occluded/covered.
I couldn't get to work for a footer due to bugs in iOS page/viewport height when the keyboard is showing.
Edit example using http://jsbin.com/xujofoze/4/edit and view using http://output.jsbin.com/xujofoze/4/quiet
For my needs, I found it easier to use an absolute positioned header, hide it before scroll and show it when finish scroll (I need the same code to support iOS4 and Android).
For my purposes, I hide the header on a touchstart event, and show it again on touchend or scroll event (plus some timers to improve responsiveness/reduce flickering). It flashes, but is the best compromise I could find. One can detect the start of scrolling using the touchmove event (jQuery does this), but I found touchmove didn't work as well for me because:
regularly the iPad fails to do a repaint before scrolling (i.e. the absolute header remains stuck - even though the top was changed before scrolling started).
when an input element gets focus, the iPad auto-centres the element, but the scrollstart event doesn't get fired (because no touchmove if just clicking an input).
Implementing a fixed header on iOS5 could be improved by using a hybrid approach of fixed and absolute positioning:
used fixed positioning for iOS5 until an input gets focus.
when an input gets focus (keyboard showing), change to the iOS4 absolute positioning code.
when the keyboard is closed, change back to fixed positioning.
Code to detect when keyboard is closed (e.g. using keyboard hide key) is to register the DOMFocusOut event on the document element and do something like the following code. The timeout is needed because the DOMFocusOut event can fire between when one element gets the focus and another loses it.
function document_DOMFocusOut() {
clearTimeout(touchBlurTimer);
touchBlurTimer = setTimeout(function() {
if (document.activeElement == document.body) {
handleKeyboardHide();
}
}.bind(this), 400);
}
My fixed header code is something like:
{
setup: function() {
observe(window, 'scroll', this, 'onWinScroll');
observe(document, 'touchstart', this, 'onTouchStart');
observe(document, 'touchend', this, 'onTouchEnd');
if (isMobile) {
observe(document, 'DOMFocusOut', this, 'docBlurTouch');
} else if (isIE) {
// see http://ajaxian.com/archives/fixing-loss-of-focus-on-ie for code to go into this.docBlurIe()
observe(document, 'focusout', this, 'docBlurIe');
} else {
observe(isFirefox ? document : window, 'blur', this, 'docBlur');
}
},
onWinScroll: function() {
clearTimeout(this.scrollTimer);
this.scrolling = false;
this.rehomeAll();
},
rehomeAll: function() {
if ((isIOS5 && this.scrolling) || isIOS4 || isAndroid) {
this.useAbsolutePositioning();
} else {
this.useFixedPositioning();
}
},
// Important side effect that this event registered on document on iOs. Without it event.touches.length is incorrect for any elements in the document using the touchstart event!!!
onTouchStart: function(event) {
clearTimeout(this.scrollTimer);
if (!this.scrolling && event.touches.length == 1) {
this.scrolling = true;
this.touchStartTime = inputOrOtherKeyboardShowingElement(event.target) ? 0 : (new Date).getTime();
// Needs to be in touchStart so happens before iPad automatic scrolling to input, also not reliable using touchMove (although jQuery touch uses touchMove to unreliably detect scrolling).
this.rehomeAll();
}
},
onTouchEnd: function(event) {
clearTimeout(this.scrollTimer);
if (this.scrolling && !event.touches.length) {
var touchedDuration = (new Date).getTime() - this.touchStartTime;
// Need delay so iPad can scroll to the input before we reshow the header.
var showQuick = this.touchStartTime && touchedDuration < 400;
this.scrollTimer = setTimeout(function() {
if (this.scrolling) {
this.scrolling = false;
this.rehomeAll();
}
}.bind(this), showQuick ? 0 : 400);
}
},
// ... more code
}
jQuery mobile supports scrollstart and scrollstop events:
var supportTouch = $.support.touch,
scrollEvent = "touchmove scroll",
touchStartEvent = supportTouch ? "touchstart" : "mousedown",
touchStopEvent = supportTouch ? "touchend" : "mouseup",
touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
function triggerCustomEvent( obj, eventType, event ) {
var originalType = event.type;
event.type = eventType;
$.event.handle.call( obj, event );
event.type = originalType;
}
// also handles scrollstop
$.event.special.scrollstart = {
enabled: true,
setup: function() {
var thisObject = this,
$this = $( thisObject ),
scrolling,
timer;
function trigger( event, state ) {
scrolling = state;
triggerCustomEvent( thisObject, scrolling ? "scrollstart" : "scrollstop", event );
}
// iPhone triggers scroll after a small delay; use touchmove instead
$this.bind( scrollEvent, function( event ) {
if ( !$.event.special.scrollstart.enabled ) {
return;
}
if ( !scrolling ) {
trigger( event, true );
}
clearTimeout( timer );
timer = setTimeout(function() {
trigger( event, false );
}, 50 );
});
}
};
This is somewhat still a problem in iOS13 (when a long text gets deleted in the 'textarea' field, fixed header jumps to the start of that 'textarea' field, obstructing the view), therefore, I thought I share my quick fix:
Since my footer is rather large, I went about without any JS and just adding a greater z-index to the footer than what the fixed header has. Out of sight, out of mind.
I have something similar to this iScroll example: http://cubiq.org/dropbox/iscroll4/examples/simple/
Except that I'm using jQuery mobile (i.e., the header, footer, and content are set using jQuery Mobile). Everything is running smoothly except for scrollToElement.
Is there any way to get scrollToElement working when using jQuery Mobile and iScroll?
Here's the iScroll script I currently have:
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200);}, false);
EDIT: Forgot to mention what I'm trying to achieve. In the iScroll example mentioned above, I'm trying to scroll to a specific row. The only problem is that jQuery Mobile prevents scrollToElement from working for some reason.
Also make sure that you're using a timeout
setTimeout(function () {
myScroll.scrollToElement(".elementClass", "0s");
myScroll.refresh();
}, 0);
The workaround I have found is to capture the elements position and then use scrollToPage():
var w = $("#showselectedauthors").offset().top;
// ...
$.storeScroller.scrollToPage(0, w);
Of course for this to work you have to capture the position when the element is visible or the offset will be meaningless. You can do this when the page is built but before the scroller is initialized.
In my case the element is visible and I capture w at that time. I then refresh some content and refresh the scroller. After I do that I want to make sure the element is still visible.
Case anyone needs to scroll to a jQuery Object here's my code .
Make sure you're calling this method inside a setTimeout and your "iscroll" object is defined .
function scrollToElement($element) {
if ($element.size() > 1) {
throw new Error("Cannot be a node!");
};
var offset = $element.offset().top;
var to = -(offset - iscroll.y);
to = (iscroll.maxScrollY > to) ? iscroll.maxScrollY : to;
iscroll.scrollTo(0, to);
}