小程序里添加滚动并监听滚动事件
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'
}
}
