child element Scroll parent element container does not follow scrolling JS implementation

First, warm up the opening of the body

The online common squat to squat the little jokes, for example: "Li Dai Squat, Li Dai squat, Li Dai squatting Huanghaibo Squat Huanghaibo Squat, Huanghaibo squat, Huanghaibo squat, ning the wealth of God squat, better squat, better the mammon squat, the wealth of God squat Zhang Yaoyang squatting, Zhang Yaoyang squat, Zhang Yaoyang squat, Zhang Yaoyang squat, Guo Meimei squatting, Guo Squat, Guo Meimei squatted down ... ". should be derived from the "radish squat, radish squat, radish squatting after the apple squat ..."

In the Web page, scroll bar scrolling behavior is similar to the same tune, if the page has more than one inline scroll bar, the behavior is: child element roll, child element roll, child elements roll the parent element roll, parent element roll, parent element roll, parent elements roll container roll ...

Let's say:

In the face of Sister roll, first sister roll, sister roll Home roll, right ~

ZXX: Don't ask why not use Zhang Rhyme, because Zhang sister photo is horizontal, rolling space small, know cutting ~

This is the default behavior of the browser, if we encounter a requirement: The child element rolls, the child element rolls over, the parent element does not need to roll. How to achieve it?

On the PC side, OK, this article describes the method, the value is applicable to the PC end, mobile end, cough, I have not done 15 years mobile project, sorry, Rusty, I did not study.

Added on the following day
For the processing of the mobile end, see this article in @hacke2: "Using the native sliding screen solution on the mobile end"

Ii. specific routines that block browser default behavior

Ha, the title of this article is somewhat clumsy, in fact, in a nutshell is: How to prevent the browser's default scrolling behavior.

Basically, there is no exception to the impression, blocking the browser's default behavior, one (assuming event object arguments are events): event.preventDefault() .

This is the standard specification usage method. However, for old IE browsers, event.returnValue = false if you use a framework such as jquery, directly above event.preventDefault() it, the library has helped you handle the compatibility details.

OK, back to this article. Blocking the default scrolling is similar, and the key is to find the exact event.

The first reaction is the scroll incident, do not know is not my test method is not correct, the result is no bird; in fact, think also can understand, scroll event to trigger, the NI must have been rolling ha ~

Later, it was found to be handled from the source of the rolling event. On the PC side, the vast majority of scrolling is the mouse scrolling trigger (up and down shortcut keys can also scroll the page, but the general people do not know), so we can start with the mouse wheel event.

Third, mouse wheel event

JS basic knowledge of the, mousewheel events:

Dom.onmousewheel = function () {
    //hey hehe
};
 
IE, chrome all know, but Firefox browser, to use Dommousescroll, specific knowledge I have written before the article analysis: "JS Wheel event (Mousewheel/dommousescroll) understand." Now look back at this article, the content and points are very good. However, it was just a study of modular development and JavaScript language mode, so the code provided, Koko, is not copycat, so this article has no Fire ~
 
Pull away, in short, we scroll to the mouse this event, carried out event.preventDefault() , the page is like a gear jam, rolling not moving!
 
Four, the principle climbs up
 
We found the key key and now we're going to open the door.
 
Child elements can be rolled, and parent elements cannot be rolled.
 
We can write the mouse wheel event on the child element, and when we scroll to the boundary, we immediately insert a knife event.preventDefault() . Kill the entire page of scrolling, the world suddenly quiet, the time seems to be still general, like a very good look oh!
 
So, I'm going to get a code (rough schematic) for my farts:
 
if (Direction = = "Up" && scrolltop = 0) { 
   event.preventdefault ()
}
 
Brother I roll up, when the end of the roll, the page to roll the dishes.
 
Chrome a test, oh oh, great, clap!  Firefox a test, oh oh, great too, clap again! IE a test, oh ah, good ..... Ma, fuck off. The scrolling height jumps over 0 and rolls the parent element directly.
 
Damn, what the hell? Incompatible, uncertain, how to do?
 
V. Critical manual Tumbling
 
That is, let's not go to the 0 or max scrolling height and then stop the default scrolling, and we're going to start by scrolling at the front of the boundary, and manually scrolling to the boundary while event.preventDefault() preventing the mouse from scrolling. So, IE browser is also great!
 
To tell you the truth, from the beginning to the present, the Chinese snapped so much, in fact, there is no yarn, from the degree of Niang or brother to come over the students need is not what God-dao nonsense, need only the following paragraph can be directly copycat code, OK, take it--the child elements rolled over the method source code:
$.fn.scrollunique = function () {return $ [this]. each (function () {var eventtype = "MouseWheel";//Firefox is the Dommousescroll event if (Document.mozhidden!== undefined) {EventType = "dommousescroll";} $ (this). On (EventType, function (event) {//some data var scrolltop = this.scrolltop, scrollheight = this.scrollheight, height = This.clientheight; var delta = (Event.originalEvent.wheelDelta)? Event.originalEvent.wheelDelta:-(event.originalEvent.detail 0); if (Delta > 0 && scrolltop <= Delta) (Delta < 0 && Scrollheight-height-scrolltop <=-1 * Delta) {//IE browser scrolling will directly affect parent scrolling across boundaries, so the critical time manual boundary scrolling positioning this.scrolltop = Delta > 0? 0:scrollheight;//Roll up Event.preven Tdefault (); } }); }); };
Yes, an extension of jquery relies on the above code to be copied to your page JS, and then, you want which element to scroll in the end, the parent does not scroll, directly:
 
$ (). Scrollunique ();
 
, and then you can clock out.
 
By the way, there is a demo, you can ruthlessly click here: Inside elements scrolling in the end the external container does not scroll demo
 
If your monitor vertical screen, or width of 1920, will find no big scroll on the right, then, trouble everyone manual height change small, lesbian window ah, or open the console and so on.
 
ZXX: You asked me what not to raise the page to create a scroll bar? Alas, reluctant to put the bottom of the ads deliberately hidden in the scroll bar ~
 
Six, a
 
The previous article also mentioned that the page scroll scroll a lot of event sources, not only the mouse scrolling, up and down keys, end keys, home keys, and so have a scrolling positioning behavior. Therefore, we want to 100% omni-directional blocking rolling behavior, only the mouse scrolling code is not enough, but the key key has been to everyone, we can, in turn, according to their own project needs for further in-depth expansion.
 
However, I personally feel that the above mousewheel processing is enough, what keyboard trigger rolling, let him play it himself, or do not toss, thankless.
 
Yo, finished, looked up, a screenshot is not, this can not, Feng shui can not be broken, make a picture.