Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码

下面是关于Js判断H5上下滑动方向及滑动到顶部和底部判断的完整攻略：

下面是关于Js判断H5上下滑动方向及滑动到顶部和底部判断的完整攻略：

一、背景

在H5页面中，经常需要判断用户向上滑动或向下滑动，并且需要知道用户是否已经滑动到了页面的顶部或底部。为了实现这个功能，需要借助Js的一些特性和事件，下面将会详细介绍。

二、滑动事件

当页面出现滚动条时，可以侦测滚动条的滑动事件，常用的有scroll、touchmove等事件。其中scroll事件适用于PC端、pad端，touchmove事件适用于手机端。

三、判断滑动方向

当滚动条滚动的时候，可以通过以下方法来判断滑动的方向：

// 记录上一次的滑动位置
var lastScrollTop = 0;
$(window).scroll(function(){
  var scrollTop = $(this).scrollTop();
  var direction = scrollTop > lastScrollTop ? "down" : "up";
  lastScrollTop = scrollTop;
  console.log(direction);
});

上述代码中，利用jQuery中的scroll方法，捕捉浏览器窗口的滚动条位置，将其与上一次的滚动位置进行比较，根据大小判断滑动方向。

四、判断是否滑动到底部或顶部

当我们需要判断是否到达底部或顶部时，可以通过以下方式进行判断：

// 判断滚动条是否滑到底部
function isScrollToBottom() {
  return $(window).scrollTop() + $(window).height() == $(document).height();
}

// 判断滚动条是否滑到顶部
function isScrollToTop() {
  return $(window).scrollTop() == 0;
}

上述代码中，利用jQuery中的scrollTop、height、document.height()方法，计算出当前页面已滑动的距离（即scrollTop），判断滑动条是否处于底部或顶部，从而判断是否到达底部或顶部。

五、示例说明

示例一

需求：在滑动页面时，动态改变导航栏的样式，并且判断是否到达页面的底部。

实现方法：用scroll事件监听windows上的滚动，获取scrollTop值，比较是否到底部，并且改变导航栏的样式。

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
  var windowHeight = $(window).height();
  var documentHeight = $(document).height();
  if (scrollTop + windowHeight == documentHeight) {
    console.log("已经到达底部");
  }

  //获取当前页面滑动的距离
  if (scrollTop > 50) {
    $(".nav-wrap").css("background-color", "#fff");
    $(".nav-wrap li a").css("color", "black");
  } else {
    $(".nav-wrap").css("background-color", "");
    $(".nav-wrap li a").css("color", "");
  }
});

示例二

需求：在用户滑动到页面的顶部时，出现顶部的“返回页面顶部”按钮。

实现方法：用scroll事件监听windows上的滚动，获取scrollTop值，判断是否滑到页面顶部，如果是，则显示返回顶部的按钮。

$(window).scroll(function() {
  if ($(this).scrollTop() > 50) {
    $(".go-top").css("display", "block");
  }
  else {
    $(".go-top").css("display", "none");
  }
});

六、总结

以上是关于Js判断H5上下滑动方向及滑动到顶部和底部判断的完整攻略。总之，为了实现这个功能，需要了解Js中的滑动事件、滚动事件，同时对jQuery有一定的掌握能力。希望对大家有所帮助。