悬浮按钮滚动时隐藏不滚动显示

小程序里添加滚动并监听滚动事件

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,
  },
  /**
   * 滚动监听
   */
  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('停止滚动了');
        this.setData({
          iSscroll: false
        })
      }
    }, 100);
  }
})

web页面实现方法

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('停止滚动了');
    button.style.display = 'block'
  }
}

在线演示