js实现弹窗滚动背景页面不跟随滚动
js实现弹窗滚动背景页面不跟随滚动
>
function getScrollOffset() {
if (window.pageXOffset) {
return {
x: window.pageXOffset,
y: window.pageYOffset
}
} else {
return {
x: document.body.scrollLeft || document.documentElement.scrollLeft,
y: document.body.scrollTop || document.documentElement.scrollTop
}
}
};
var scrollT = null;
var LastScrollT = 0;
window.onscroll = function (e) {
scrollT = getScrollOffset().y;
//滚动条距离
}
$('.bg').on('touchmove', function () {
event.preventDefault();
//阻止默认行为
event.stopPropagation();
//阻止冒泡
});
$('.btn').click(function () {
$('.alertBox,.bg').show()
$("body").css({ "position": "fixed", "overflow": "hidden", "top": '-' + scrollT + 'px' });
LastScrollT = scrollT;
})
$('.close,.bg').click(function () {
$('.alertBox,.bg').hide()
$("body").css({ "position": "static", "overflow": "auto", "top": '0px' });
if (window.pageXOffset) {
window.pageYOffset = LastScrollT;
} else {
document.body.scrollTop = LastScrollT;
document.documentElement.scrollTop = LastScrollT;
}
})
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆
- paddle|动手从头实现LSTM
- pytorch|使用pytorch从头实现多层LSTM