multi directional scrolling between html documents
I've been playing around with multi directional scrolling with jquery. I find this is a superb way to navigate through a website, but it has one drawback. The browser needs to load all site content at once because it's in one html document.
Now I have been searching unsuccessfully for a way to开发者_StackOverflow中文版 have this great scrolling between different html documents. So instead of scrolling between div's I wonder if it is possible to scroll between html documents. Is this possible?
This isn't possible in the normal sense of how Request/Response transaction between a client and a server - only a browser could animate changes on this page-change level. There are some other options:
- When you scroll off to one side, use JS to redirect the browser (with some hash tags or query strings for info) to the next page. When the next page loads, you apply an animation that makes it look like it's been scrolled into. This has the nasty disadvantage of have a delay between page transitions.
- use AJAX, so, when you scroll, content is asynchronously loaded into the page. Then, once it's loaded, you don't have to worry about it. This is similar to what Google or Bing do when you're scrolling through images in an image search. This has the advantage of loading only what you need.
For AJAX loading, jQuery's AJAX method is very useful: http://api.jquery.com/jQuery.ajax/
Simply pass in a URL, any info you want, and a callback. On the callback, load the response data into an empty div
or wherever.
Something like this example, taking from jQuery's site:
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
alert('Load was performed.');
}
});
There are two ways that you could get this accomplished.
- Use iframes. This is obviously not the best choice.
- The second is to make all links in the DIV use ajax and load content into the DIV. Basically, modify all of the links to not actually go anywhere, but to load dynamically on the page into the respective DIV.
Yes, if you preload other html pages to divs or iframes (for example).
精彩评论