最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

禁止弹窗下底部页面滑动

来源:动视网 责编:小采 时间:2020-11-27 19:59:37
文档

禁止弹窗下底部页面滑动

禁止弹窗下底部页面滑动:这次给大家带来禁止弹窗下底部页面滑动,禁止弹窗下底部页面滑动的注意事项有哪些,下面就是实战案例,一起来看一下。在项目开发过程中,经常会遇到带有弹窗的页面,尤其是在移动端。在没有特别要求的情况下,弹窗弹出后,弹窗下的底部页面依然能够滑动。为了
推荐度:
导读禁止弹窗下底部页面滑动:这次给大家带来禁止弹窗下底部页面滑动,禁止弹窗下底部页面滑动的注意事项有哪些,下面就是实战案例,一起来看一下。在项目开发过程中,经常会遇到带有弹窗的页面,尤其是在移动端。在没有特别要求的情况下,弹窗弹出后,弹窗下的底部页面依然能够滑动。为了


这次给大家带来禁止弹窗下底部页面滑动,禁止弹窗下底部页面滑动的注意事项有哪些,下面就是实战案例,一起来看一下。

在项目开发过程中,经常会遇到带有弹窗的页面,尤其是在移动端。在没有特别要求的情况下,弹窗弹出后,弹窗下的底部页面依然能够滑动。为了得到更好的用户体验,需要做到触发弹窗时,弹窗底部页面禁止滑动,关闭弹窗时,弹窗底部页面恢复滑动,具体思路如下:

1.触发弹窗时,获取滚动条所在的位置。

2.将底部页面的position属性设置为fixed。

3.设置底部页面的位置为触发弹窗时的初始位置。

4.关闭弹窗时,恢复底部页面的position属性。

5.恢复底部页面的滚动条高度。

//触发弹窗底部页面禁止滑动
function fixed(){
 var scrollTop = document.body.scrollTop;//设置背景元素的位置
 $('#content').attr('data-top',scrollTop);
 var contentStyle = document.getElementById("content").style;//content是可以滚动的背景元素id名称
 contentStyle.position = 'fixed'; //contentStyle是第二步的变量,设置背景元素的position属性为‘fixed'
 contentStyle.top = "-"+scrollTop+"px";
}
//关闭弹窗底部页面恢复滑动
function fixed_cancel(){
 var contentStyle = document.getElementById("content").style;
 var scrollTop = $('#content').attr('data-top');//设置背景元素的位置
 contentStyle.top = '0px';//恢复背景元素的初始位置
 contentStyle.position ="static";//恢复背景元素的position属性(初始值为absolute,就恢复为absolute,以此类推)
 $(document).scrollTop(scrollTop);//scrollTop,设置滚动条的位置
}

触发弹窗时执行fixed()方法;关闭弹窗时触发fixed_cancel()方法;即可获得更好的用户体验。

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

jackson解析json串时大小写自动转换的方法

jQuery+localStorage实现计时器

文档

禁止弹窗下底部页面滑动

禁止弹窗下底部页面滑动:这次给大家带来禁止弹窗下底部页面滑动,禁止弹窗下底部页面滑动的注意事项有哪些,下面就是实战案例,一起来看一下。在项目开发过程中,经常会遇到带有弹窗的页面,尤其是在移动端。在没有特别要求的情况下,弹窗弹出后,弹窗下的底部页面依然能够滑动。为了
推荐度:
标签: 页面 下面 滚动
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top