Ps: From the designer’s soul needs.

Design sister: I want to use the mouse scroll to achieve this news test page.

Programmer (mouth) : Ok, is there a page you can refer to?

Programmer (inside) : Never heard of it, what the hell.

Design little sister: very simple, when the mouse scroll up, the news layer by layer to turn the page, turn to the end, the page on the scroll up, the same, the mouse scroll down, the news layer by layer to turn the page, turn to the end, the page on the scroll down.

Programmer (mouth) : Ok, speak very clearly, I understand, should not be difficult.

This programmer (heart) : do you think that is PPT, still turn the page, or I give you make an animation 24 hours of loop play. God knows how.

Mouth and body, do or have to do, just write a pit diary.

What’s the break point?

Break point lies in the change, the page rolling rolling can not roll, the news rolling, the page began to roll again.

Confident, I quickly looked up the information on the mouse wheel incident,

MDN:developer.mozilla.org/zh-CN/docs/…

Watched for a while, a head of confusion, well, I have no self-knowledge, I lower the requirements of their own, search related to the wheel event of the demo. Sure enough, this is the kind of demo that suits me.

Blog.csdn.net/wxl1555/art…

www.cnblogs.com/hackerPJ/p/…

Use this demo has carried on the experiment, found that only the mouse within A specified element, can in the rolling operation, for example, if you disable the element B wheel events, but you are the brother element A (A) before the element B, anxiously to scroll A lot, you can be directly across B element (the element of our disabled the wheel events).

In this way, we assume that the user’s mouse is directly inside our B element. At this time, we judge that the B element’s scroll event should be banned according to the current news subscript and the direction of the scroll wheel. For example, the first story, scrolling up, and the last story, scrolling down should not be prohibited.

Step pit pain points:

Event flow, WebAPI reference interface

Whether you think you can or you think you can’t, you’re absolutely right.

Group photo nostalgia ~