小程序里添加滾動并監(jiān)聽滾動事件

wxml 代碼

<scroll-view scroll-y enable-back-to-top="true" bindscroll="handleScroll">
  <view class="float-button {{ iSscroll ? 'active' : ''}};"></view>
</scroll-view>

wxss 代碼

.float-button {
  position: fixed;
  right: 20rpx;
  bottom: 310rpx;
  width: 150rpx;
  height: 150rpx;
  background: red;
  z-index: 10;
}
.float-button.active{
  right: -80rpx;
  opacity: .6;
  animation: all .3s linear;
}

js 代碼

let start = 0,
  end = 0,
  timer = null;
Page({
  data: {
   iSscroll: false,
  },
  /**
   * 滾動監(jiān)聽
   */
  handleScroll: function(e) {
    console.log('滾動時', e)
    start = e.detail.scrollTop
    this.setData({
      iSscroll: true
    })
    clearTimeout(timer)
    timer = setTimeout(() =>{
      end = e.detail.scrollTop;
      if(end == start){
        console.log('停止?jié)L動了');
        this.setData({
          iSscroll: false
        })
      }
    }, 100);
  }
})

web頁面實(shí)現(xiàn)方法

html代碼

  <div class="app">
    <div class="button">按鈕</div>
  </div>

css代碼

.app{
  height: 20000px;
  
}
.button{
  position: fixed;
  top: 100px;
}

js代碼

var start = 0;    
var end = 0;     
var timer = null;
var button = document.querySelector(".button")
document.onscroll = function(){
  start = document.body.scrollTop;
  button.style.display = 'none'
  clearTimeout(timer)
  timer = setTimeout(isScroll, 100);
}
function isScroll(){
  end = document.body.scrollTop;
  if(end == start){
    console.log('停止?jié)L動了');
    button.style.display = 'block'
  }
}

在線演示