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] ||
                if (touch.pageX - startX > 10) {
                        console.log("Right stroke");
                } else if (touch.pageX - startX < -10) {
                        console.log("Left stroke");
                if (touch.pageY - startY > 10) {
                } else if (touch.pageY - startY < -10) {
                        console.log("Top stroke");

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

}).on('touchend', function() {

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
var wTop=$(window).height();//The height of the zoom window will change. You need to get it again
  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


//Enable scroll bar

Tags: Javascript JQuery Mobile Android

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