Common code set

I. jquery returns to the top

$("html , body").animate({scrollTop: 0},'slow');

Second, jQuery judges the sliding direction of the mobile screen

$('body').on('touchstart', function(e) {
        var touch = e.originalEvent,
                startX = touch.changedTouches[0].pageX;
        startY = touch.changedTouches[0].pageY;
        $('body').on('touchmove', function(e) {
                touch = e.originalEvent.touches[0] ||
                        e.originalEvent.changedTouches[0];
                if (touch.pageX - startX > 10) {
                        console.log("Right stroke");
                        showPrevious();
                        $('body').off('touchmove');
                } else if (touch.pageX - startX < -10) {
                        console.log("Left stroke");
                        showNext();
                        $('body').off('touchmove');
                };
                if (touch.pageY - startY > 10) {
                        console.log("Underline");
                        $('body').off('touchmove');
                } else if (touch.pageY - startY < -10) {
                        console.log("Top stroke");
                        $('body').off('touchmove');
                };
        });

        // Return false to prevent image
        // highlighting on Android
        return false;

}).on('touchend', function() {
        $('body').off('touchmove');
});

III. the page moves to the corresponding position to start the animation

When the orange container enters the visible area from below (or after entering a certain height), the animation in the container plays.

var eTop=$(element).offset().top;//Orange container distance from the top of the entire page
var wTop=$(window).height();//Height of visible area of green box
window.onresize=funciton(){
var wTop=$(window).height();//The height of the zoom window will change. You need to get it again
}
$(window).scroll(funciont(){
  var dTop = $(document).scrollTop();//The distance from the top of the green box to the top of the black page will change in real time
    //So how to judge when the orange container enters the visible area?
    //Put it in the scroll event
    if(dTop+wTop > eTop){//Animation playback events}
});

In this way, when the height above the visible area + the height of the visible area > the height of the container from the top, we know that the container enters the [bottom of the visible area]
If you want the container to enter a distance (such as 100px) and trigger the animation again?

//Put it in the scroll event
if(dTop+wTop-100 > eTop){//Animation playback events}

4. Enable and disable the scroll bar
//Disable scrollbar

$(document.body).css({
 "overflow-x":"hidden",
 "overflow-y":"hidden"
});

//Enable scroll bar
$(document.body).css({
 "overflow-x":"auto",
 "overflow-y":"auto"
});

Tags: Javascript JQuery Mobile Android

Posted on Mon, 02 Dec 2019 14:43:13 -0500 by exally