Example of jquery sliding the div layer of a mobile website

Body is very long, can slide, body Head has a simulation drop-down selection box. The Drop-down selection has a scroll axis, as shown below.

I give the body a overflow:hidden and height is no use. Mobile website background can still slide, and then I give the body a touchmove preventdefault () to prevent the event, the bodies slide organization, the PC above is OK, but the phone above the sliding div or will lead to the bottom body sliding, I give Div A Stop Bubbling Event stoppropagation (), the mobile site is still not on the top.

About Preventdefault and stoppropagation, there's time to explain the difference.

Solution

I passed the test repeatedly, the rolling shaft rolling back to the bottom of the time, will trigger the body sliding, then I will be in the event roll to the bottom of the div to do a touchmove block. Reach the bottom of the scroll shaft, slide down, block events, slide up, and open events. To this end, we must judge the direction of Touchmove.

$ (' body '). On ("Touchstart", function (e) {
    e.preventdefault ();
    StartX = E.originalevent.changedtouches[0].pagex,
    starty = e.originalevent.changedtouches[0].pagey;
} );
$ (' body '). On ("Touchmove", function (e) {
    e.preventdefault ();
    Moveendx = E.originalevent.changedtouches[0].pagex,
    Moveendy = e.originalevent.changedtouches [0].pagey,
    X = moveendx-startx,
    Y = moveendy-starty;

if (Math.Abs (x) > Math.Abs (Y) && X > 0) {
Alert ("Left 2 Right");
}
else if (Math.Abs (x) > Math.Abs (Y) && X < 0) {
Alert ("Right 2 Left");
}
else if (Math.Abs (y) > Math.Abs (X) && Y > 0) {
Alert ("Top 2 Bottom");
}
else if (Math.Abs (y) > Math.Abs (X) && Y < 0) {
Alert ("Bottom 2 top");
}
else{
Alert ("Just touch");
}
});

The above method is to judge the sliding direction of the touchmove.

$ (' #haorooms底层背景 '). Bind ("Touchmove", function (e) {
E.preventdefault ();
});
$ (". Rolling father"). Bind ("Touchstart", function (events) {
Starty = Events.originalevent.changedtouches[0].pagey;
});
$ (". Rolling father ul"). Bind ("Touchmove", function (e) {
var ulheight = $ (this). Height ();
var scrolltop = $ (this). ScrollTop ();
var scrollheight = $ (this) [0].scrollheight;
if (ulheight + scrolltop + >= scrollheight) {//Roll to bottom 20px or so
$ (". Rolling father"). Bind ("Touchmove", function (event) {
Moveendy = Event.originalevent.changedtouches[0].pagey,
TheY = Moveendy-starty;
if (TheY > 0) {//with the above ABS () more accurate!)
$ (". Rolling father"). Unbind ("Touchmove");
}
if (TheY < 0) {
Event.preventdefault ();
}
})
}
if (ScrollTop < 20) {//Roll to the top 20px or so
$ (". Rolling father"). Bind ("Touchmove", function (event) {
Moveendy = Event.originalevent.changedtouches[0].pagey,
TheY = Moveendy-starty;
if (TheY > 0) {
Event.preventdefault ();
}
if (TheY < 0) {
$ (". Rolling father"). Unbind ("Touchmove");
}
})
}
});