Loading new content when user reaches right side of the page

Question

There is plenty of plugins that allow to load content when the user reaches the bottom of the page, however I can't find jquery plugin that would allow you to load content when user reaches the right side of the document.

Is there a good strategy to do this ?

Is there a good plugin that does this ?

Thanks, Peter

Try to look at http://stackoverflow.com/questions/8105152/jquery-horizontal-scroll-event-edit and http://stackoverflow.com/questions/3186622/is-there-a-vertical-scroll-event-in-jquery posts. — mr.The, Aug 17 '12 at 08:57
I don't know if the question should be closed as duplication, or kept open as this could have a better search term :) — Val, Aug 17 '12 at 09:03
@mr.The yes, I have seen these links, however this basically means creating a plugin from scratch, while I was interested if there a good plugin to do so... — Peter, Aug 17 '12 at 09:06
@peter I mean't more people are more likely to search for the solution as you have on the title, therefore this would be a great question to land on for people with similar issue... To answer you question, yes, the plugin is very simple to be created, or simply use, the onscroll event to detect when it reaches the end by choosing `.scrollWidth` to detect total srollable width, then `scrollLeft()` how far they have scrolled so far, — Val, Aug 17 '12 at 09:12

Val · Answer 1 · 2012-08-17T15:51:13.450

1

$('div').scroll(function (){
  var padder = 50;
  if( $(this).scrollLeft() >= $(this).scrollWidth -padder){
     //load more content as the user has scrolled 50px less than, the end, 
  }
})

I think something like this would do it ....

edited Aug 17 '12 at 15:51

answered Aug 17 '12 at 09:14

Val

17,336
23
95
144

1

btw, should you need to use it for future elements change first line to `$('div').live('scroll',function (){` – Val Aug 17 '12 at 09:34
also, you may want to use `parseInt()` if the unit `px` is returned with `scrollWidth` :) – Val Aug 17 '12 at 09:35
Great, this make sense, the next step probably is to write actual plugin and publish it on github)) – Peter Aug 17 '12 at 10:28
Hmm, dear @Val Shouldn't I be listening to the window events rather then div events ? – Peter Aug 17 '12 at 15:23

score 0 · Answer 2 · answered Aug 17 '12 at 15:41

This does the job nicely:

//Scroll
  var padder = 150;
  $(document).live('scroll',function (){
     if($(this).scrollLeft() > padder){
    $.post("data.txt", { bla: "1", blu: "ax" },
        function(data) {
         //TODO add a check when reach the end
         padder = padder +200;
         $("#events_list").width($("#events_list").width()+200);
         $("#events_list").append(data);
        },"text");
     }
  });

Loading new content when user reaches right side of the page

2 Answers2