在小程序中轻松监听页面滚动，打造丝滑用户体验

当应用程序需要在页面滚动时执行某些操作，如加载更多数据、改变导航栏样式、显示浮动按钮时，就需要使用页面滚动监听。在小程序中，主要有以下几种方式可以监听页面滚动：

• Intersection Observer：

  • Intersection Observer 是一个浏览器原生 API，专门用于监听目标元素与视口（viewport）之间的相交情况。当元素进入或离开视口，浏览器就会触发相应的事件，开发者可以针对该事件编写处理逻辑。
  • 使用 Intersection Observer 监听页面滚动可以很好地满足业务需求，浏览器会根据元素进入或者离开视口的位置触发事件，开发者只需要处理事件即可。
  • 使用方法：
    • 引入 Intersection Observer 模块：```js
      import { createIntersectionObserver } from '@tarojs/taro'

    • 创建一个 Intersection Observer 实例：

      const observer = createIntersectionObserver(function (res) {
        // 处理元素进入或离开视口触发的回调函数
      }, {
        threshold: 0 // 当元素与视口相交的比例超过阈值时，触发回调函数
      })
      

    • 监听元素的相交情况：

      observer.observe(element) // 监听元素 element 的相交情况
      

• scroll：

  • scroll 事件是当窗口（在某些情况下是元素）被滚动时触发的事件。该事件适用于 window 对象和某些可滚动的元素，如
    和 。
  • 使用 scroll 事件监听页面滚动可以监听用户滚动页面的行为，开发者可以针对该事件编写处理逻辑。
  • 使用方法：
    • 监听 window 对象的 scroll 事件：

      window.addEventListener('scroll', function () {
        // 处理页面滚动触发的回调函数
      })
      

    • 监听可滚动的元素的 scroll 事件：

      element.addEventListener('scroll', function () {
        // 处理元素滚动触发的回调函数
      })
      

• touchmove、ontouchmove：

  • touchmove 和 ontouchmove 事件是在触摸屏设备上触摸并移动手指时触发的事件。该事件适用于所有能够接收触摸事件的元素。
  • 使用 touchmove 和 ontouchmove 事件监听页面滚动可以监听用户滚动页面的行为，开发者可以针对该事件编写处理逻辑。
  • 使用方法：
    • 监听 window 对象的 touchmove 事件：

      window.addEventListener('touchmove', function (e) {
        // 处理页面滚动触发的回调函数
        console.log(e.touches[0].pageY) // 获取手指在屏幕上的 Y 坐标
      })
      

    • 监听可滚动的元素的 touchmove 事件：

      element.addEventListener('touchmove', function (e) {
        // 处理元素滚动触发的回调函数
        console.log(e.touches[0].pageY) // 获取手指在屏幕上的 Y 坐标
      })
      

• onscroll、onscrollbottom：

  • onscroll 和 onscrollbottom 是用于在页面滚动时执行脚本的事件处理程序。onscroll 事件在页面滚动时触发，而 onscrollbottom 事件在页面到达底部时触发。
  • 使用 onscroll 和 onscrollbottom 事件监听页面滚动可以监听用户滚动页面的行为，开发者可以针对该事件编写处理逻辑。
  • 使用方法：
    • 在 HTML 元素中添加 onscroll 事件处理程序：

      <div onscroll="myFunction()">
        <!-- 内容 -->
      </div>
      

    • 在 HTML 元素中添加 onscrollbottom 事件处理程序：

      <div onscrollbottom="myFunction()">
        <!-- 内容 -->
      </div>
      

根据业务需求选择合适的监听方法，并结合示例代码进行实践，可以轻松实现页面滚动监听功能。