¿Cómo desplazarse hacia abajo con jquery cuando el usuario llegó a una parte específica de una imagen?

It's hard to describe what exactly i was looking for and sorry for my english. What i want to do is, while user scroll down slowly, when user reached a specific point, starting to scroll down page like 1000px and then stop scrolling at the second specific point.

Aquí hay un ejemplo:

http://comic.naver.com/webtoon/detail.nhn?titleId=350217&no=31&weekday=tu

It should be cross browser compatible.

preguntado el 31 de enero de 12 a las 08:01

I should -1 you for the shock you gave me. -

@Marnix Why is the question nonsense to you ? -

No I was shocked by the picture halfway scrolling down your example =P -

It scares me still even thought I knew what was coming!! -

Ya that was Fing scary. Im too disturbed to tell you the answer... -

3 Respuestas

Ok so I would use setTimout to check the scroll position every so often and then if the scroll position is right, scare the user or whatever you are planning:

var checkScroll = function() {
  if(window.scrollY > 1000) {
     setTimeout(checkScroll, 100);
  }
  else {
     doSomeScaryStuff()
  }
}

// need to call it manually the first time
checkScroll();

¿tener sentido?

Respondido el 31 de enero de 12 a las 13:01

There is a function that "checks scroll" every time a user scrolls. It's jQuery.fn.scroll() - Avaq

@Avaq you can do that for sure, but that event is fired very, very frequently. - Mateo

Yes, but there's two reason I think it's worth saying, one is more of a personal preference, and that is that constantly repeating something even though you know at some points its not necessary just feels worse than doing a lot at the moments you know you need it. The other actually has something to say for it, and that is; if you want to scare your users, you don't want to give them the potential extra time to think. That said, I don't think it'll make much difference in the end. - Avaq

And as for optimization; whether you listen to an event or not, it is fired nonetheless. So adding the listener doesn't affect how often the event is fired, it only adds the execution of extra code to when the event is fired. Let's look at this code. It does an if check for a specific scroll position (which again, is calculated by the browser, even if you are not requesting it) and if that check fails (which it will most of the time) you will not execute any extra code. I think this will be a tiny impact on performance. - Avaq

You can use jQuery, hook onto $(document).scroll(). Whenever the scrollTop passes a certain threshold, make it smooth scroll down to the end point.

$(document).scroll(function() {
    if ($(document).scrollTop() > ####) {
        smoothScrollTo(###);
    }
});

Respondido el 31 de enero de 12 a las 13:01

Detect the current position of the top of the window using http://api.jquery.com/scrollTop/ y window element, and use the same method combined with .animate() to smooth scroll down.

Espero que ayude!

Respondido el 31 de enero de 12 a las 13:01

I don't think you want to combine it with animate. You want it to scroll down in chunks the size of the image + added window height, so that you make it seem like a film. That's what the example does in any case :) - Avaq

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.