Is there a way that I can insert content at the beginning of a webpage without causing the page to give the impression of scrolling up.
I'm trying to implement something kind of like infinite scrolling but I need to be able to scroll up infinitely as well as down (I'm also unloading content on the other end so that the scroll bar doesn't become infinitesimal and the app doesn't take up too much memory).
I'm happy to use javascript, I'd rather not use a library (I'm trying to stay lighter weight than that).
Any ideas?
Before executing the code to create your element, simply do something like this:
var scrollY = window.scrollY;
window.onscroll = function(){
window.scrollTo(0, scrollY);
window.onscroll = null;
};
Keep in mind that, if you already have an onscroll function, you will need to reassign the function after this...
In my case layout was something like this:
<div class='container'>
<div class='list'>
product cards...
</div>
<button>Load more</button>
</div>
By clicking on button I want fetch data from server, dynamically create product cards with that data and add this cards to .list
Problem was that when dynamically cards added to the DOM, screen automaticaly scroll and I see only last added cards, but not first added.
I think its default behavior for all browsers (I may be wrong) - if content added in DOM above the focused element browser scroll page in order to focused element was on screen. If content added below the focused element scroll not happened and the focused element also on the screen.
To solve this problem I just add something like document.activeElement.blur() before add cards to the DOM and all was fine.
You can use window.scrollBy(x, y) to scroll down when you add content (you have to calculate the height of what you add).
One possible idea is to bypass the scroll mechanism completely and do your own.
Basically, position every element with display: fixed. You can then load elements above the screen using negative positions.
You'll have to sync the height of the document (just by adding white space) so the document scrollbars are correct. Then, you trap the scroll event and adjust the fixed positioning of all the elements within your page.
I'm not sure how smooth it will be, but I'm fairly certain you could get the effect you're looking for.
I solved it by saving the first element of the container in a variable and then after inserting I called "scrollIntoView" on it. Looks smooth to me.
Related
I'm using nanoscroller js to create a scrollable area in a div element. The problem is that I'm filling that div element with data with ajax (imagine facebook notifications). First there are 0 notifications, no data. Then I fill it with 10. The scrollbar isn't there. When I refresh the page (with 10 notifications now already there), it creates itself, because it knows there is more content than there is room.
How can I make it create the scroller when the data is filled?
Reinitialize the nanoScroller $("your scrollable").nanoScroller(); after you inserted the content...
like
$("your content div").append("something");
$("your scrollable container").nanoScroller();
#Jonatas Answer didn't work with me, then I figured out this one
$("#my_scrollable_container")[0].nanoscroller.reset();
I had a similar problem. My nano div originally fills the width of the screen and the amount of content does not require a scrollbar. But then a user action causes a second div to appear on the right side, making the nano div skinner and too small to display all the content -- but the scrollbar didn't appear (although I could still use the mouse wheel to scroll the nano content).
Neither of the answers provided worked for me, or maybe I applied them incorrectly. So I looked in the jquery.nanoscroller.js code (which I guess is what I should have done in the first place) and found the call is just:
$(".nano").nanoScroller();
No need to reference the div ID or anything. Each time the size of your nano div is changed, make this call and the nano scrollbar should adjust to fit. And if you have multiple nano divs in the page, this one call will reset all of them.
beware of use such a kinda :
$(".nano").nanoScroller();
cause if U have a lot of .nano DIV's and U Ajaxing data to ONE of them,
better use for example:
$("#FaceBookAjaxNotifi .nano").nanoScroller();
as Jonatas wrote..
(it boost performance dramatically in some situations)
i am updating content with ajax call from server.
after the update, i empty the wrapper div, that contains the data, and fill it again with the new data.
so far so good.
the problem is - that on a
$('#MessagesContainer').empty();
method - the scrollbar changes back up.
so if someione want to add data and he is in the bottom of the page, the scroll goes back up.
this action makes sense, but for this particular action i want to avoid it since it's not so "user-friendly".
you can use $('#MessagesContainer').html('');
This may work.
If the container you are emptying is almost all the content in the site that behaviour makes sense since for a millisecond the browser doesnt need a scrollbar.
Try just append a new container with the new messages and then remove the old one, in that way the user wont have any changes to the scroll state. Howere if the user was looking at something below the message container and there are more messages now than before the user might have to scroll down some.
Give you #messagecontainer a height with css. or depending on the layout add a second div with a min-height inside the scrolling div and then update the content of the inner div.
Add a height or min-height css property to the #MessagesContainer div this will mean that even when the contents are empty it still maintains a reasonable height on the page - this will keep the srollbar present
well, thanks for your answers.
use .html() would probably be better than .empty() and re-append the data.
but, the thing is that for my implementation that is not possible.
so what i did is implemented
.RemoveAfter(x) function
that remove all the elements after index 'x' in the collection and then append data from this 'x' index. that did the trick. the scrollbar stays where it is. it's not 100% percent user-friendly since it make some of the data disappear for a milisecond and then it comes back, but at this currently point, it's the best i could think of.
I am using the jScrollPane jQuery-Plugin on a -Box which is dynamically filled with content.
My problem is that on adding new content to the front of the old content, the maintainPosition option does not work. So I wrote my own code that moves the Scrollhandle back to it's original position.
The code works fine, but calling reinitialise() after adding the new content moves the handle to the top of the container just before my code reverts it's position. This results in a short flicker of the displayed content which is very disturbing.
Does anyone know a method to prevent the scroll handler to move to the top after calling "reinitialise()"?
Because noone has answered this question yet I've created a jsFiddle with my problem:
http://jsfiddle.net/hB4hE/1/
the calculation done on the second prepend link seems to solve the problem.
But if you run it StepByStep you see that the scrollbar is moved to top first.
Because I prepend many elements in my real environment this jumpy behavior is often visible.
So do you have an idea how to prevent it from jumping?
I didn't find any integrated solution to this, so I created a workaround:
1. calculate height of prepending elements
2. prepeding new elements
3. instantly scrolling down a distance equal to the height of the new prepended elements
Try using this setting: maintainPosition then you don't have to reposition yourself.
More information: http://jscrollpane.kelvinluck.com/settings.html#maintainPosition
Need to display an element (div) ontop of webpage. During scroll the element should disappear and reappear after scroll ends.
To add to the complexity:
our code is a guest code (thus we cannot manipulate DOM structure etc).
our code is intended to work on iPhone/iPad (mobile Safari browser)
We've tried to listen to touchstart event on document / body and hide the element (div) in our dedicated handler. However, in some sites, (when DOM structure becomes reasonably complex) the scroll response time increases significantly, even if handler implementation is entirely empty.
We are looking for the proper way to manage the element (re)appearance with a minimal affect of the user experience while scrolling.
I would think Javascript is your best solution. You can dynamically insert your DIV to any content using document.createElement, then also add some javascript to listen for onScroll...
You could even populate the DIV using custom HTML built from the native code if you want.
Any help?
I don't know if you are a jQuery user, but this .scroll() function may help you do exactly what you want to do. Check out the demo to see how it works.
http://api.jquery.com/scroll/
In recent iOS version (5.x) fixed positioning (position:fixed in CSS) is fluently supported, so that your element will be positioned on screen coordinates. That might be a good starting point for solving your troubles.
Here is my current situation:
I have a web page containing a couple scrollable divs. Each of those divs contains a number of objects. I am using YUI to display popup menus of actions that can be performed on each object. Each object has its own menu associated with it that is constructed and displayed dynamically. The popup menus can be large and can overlap the bounds of the scrollable div.
From what I believe are issues with focus (the menus must be accessible), when I hover the mouse over an action that lies on top of an edge of the scrollable div, the div automatically scrolls, moving the content but leaving the menu stationary. Trying to move the menu dynamically when this happens is not something I want to do as I believe it would provide a poor user experience.
So I need to prevent this focused menu from scrolling the div. My idea for providing the best user interface is to prevent these inner divs from scrolling when a menu is open. This leaves the menu positioned in the optimal location to show the user which item is being acted upon. If the user wants to scroll the box, they can click to close the menu and then scroll normally.
How can I do this? I need a solution that works across the major browsers.
My first thought was to listen to the onscroll event for that particular element. Unfortunately, there does not seem to be an easy way from there to just prevent the scrolling from happening. For one, my JavaScript event code appears to execute after the actual scrolling has occurred.
Then, I thought that since my code is being run after the object has scrolled, I could just reset obj.scrollTop and obj.scrollLeft. Sure enough, this appears to work, though I am worried that on slow browsers the user will see the content inside the div "jump around". Also, it would be really nice if the amount the element scrolls is part of the event object. Is it stuck in there somewhere? I'm looking for an alternative to having to store the scrollTop and scrollLeft variables for this element and then using them while the scrolling is temporarily disabled.
What is the best way to solve this entire problem?
I agree with Anthony regarding the presentation of the functionality you're trying to disallow. If you're going to disable scrolling, then you should make that part of the page visually disabled or removed.
To that end, you can position a semi-transparent div on top of the scrollable div in question, which would capture the mouse events and visually show that the scrollable div is inactive for now. It would be hard to make cross-browser compatible and wouldn't be perfect, but then again very few client-side tricks like this are.
The simple answer is no you can't do this. Its doubly no if you want a cross-browser solution.
Providing the user with the clear affordance that something can be scrolled then denying them that is just plain poor UI design.
Ok so after your edit it turns out you are not actually trying to prevent the user from scrolling.
The main answer remains true though. It sounds as though the focus is going to rectangle (probably an anchor?) that is not fully in view and causes a scroll. Is there a reason this rectangle must get the focus? For accessibility?
What if you didn't have overflow: scroll and instead you used overflow: hidden and provided scroll up/down buttons that allowed the user to scroll when necessary? These buttons could of course be disabled easily.
Though it may not be the answer you are looking for, if you are to set the display value of the div to 'none' while the page loads (from the server) and then have an event wired to the page load (either pageLoad in ajax.net or attach it to the onload event via javascript) that will make the div display set to 'block' .. that would ensure that slower browsers wouldn't see the div 'jumping around' (could even put a 'loading' image in the div to show users it's doing something and not just invisible)
sorry i couldn't provide a more complex/fluent solution.
I found a way to work around this issue. By removing the menu element from the scrollable div and then appending it directly to document.body, the browsers all stop trying to scroll the div to reveal the focused element (even though the element is already completely visible).
Thanks to all for your time and your answers!