资讯专栏INFORMATION COLUMN

遮罩层 弹框 页面滚动

lily_wang / 2544人阅读

摘要:第一种情况比较简单,弹框和页面都不可滚动第二种情况是弹框可滚动,页面不可滚动移动端兼容性不好,可应用于端适用于移动端记录开始滑动的坐标,用于判断滑动方向未开始,已开始,滑动中核心部分判定一次就够

第一种情况比较简单,弹框和页面都不可滚动

</>复制代码

  1. this is a box

  2. this is a box

  3. this is a box

</>复制代码

  1. .mask{
  2. position: fixed;
  3. top: 0;
  4. left: 0;
  5. z-index: 999;
  6. width: 100%;
  7. height: 100%;
  8. display: none;
  9. background: rgba(0,0,0,.7);
  10. }
  11. .box{
  12. position: absolute;
  13. top: 50%;
  14. left: 50%;
  15. transform: translate3d(-50%, -50%, 0);
  16. padding: 10px;
  17. background: #fff;
  18. text-align: center;
  19. }

</>复制代码

  1. var oBtn = document.getElementById("btn"),
  2. oMask = document.getElementById("mask"),
  3. oBox = document.getElementById("box"),
  4. oClose = document.getElementById("close");
  5. oBtn.onclick = () => {
  6. oMask.style.display = "block";
  7. }
  8. oClose.onclick = () => {
  9. oMask.style.display = "none";
  10. }
  11. oMask.addEventListener("touchmove", (e) => {
  12. e.preventDefault();
  13. });

第二种情况是弹框可滚动,页面不可滚动

1.移动端兼容性不好,可应用于pc端

</>复制代码

  1. this is a box

  2. this is a box

  3. this is a box

  4. this is a box

  5. this is a box

  6. this is a box

  7. this is a box

</>复制代码

  1. .mask{
  2. position: fixed;
  3. top: 0;
  4. left: 0;
  5. z-index: 999;
  6. width: 100%;
  7. height: 100%;
  8. display: none;
  9. background: rgba(0,0,0,.7);
  10. }
  11. .box{
  12. position: absolute;
  13. top: 50%;
  14. left: 50%;
  15. transform: translate3d(-50%, -50%, 0);
  16. width: 200px;
  17. height: 200px;
  18. padding: 10px;
  19. overflow-y: scroll;
  20. -webkit-overflow-scrolling : touch;
  21. background: #fff;
  22. text-align: center;
  23. }

</>复制代码

  1. var oBtn = document.getElementById("btn"),
  2. oMask = document.getElementById("mask"),
  3. oBox = document.getElementById("box"),
  4. oClose = document.getElementById("close");
  5. oBtn.onclick = () => {
  6. oMask.style.display = "block";
  7. document.body.style.height = "100%";
  8. document.body.style.overflow = "hidden";
  9. document.documentElement.style.overflow="hidden"
  10. }
  11. oClose.onclick = () => {
  12. oMask.style.display = "none";
  13. document.body.style.height = "auto";
  14. document.body.style.overflow = "scroll";
  15. document.documentElement.style.overflow="scroll"
  16. }

2.适用于移动端

</>复制代码

  1. this is a box

  2. this is a box

  3. this is a box

  4. this is a box

  5. this is a box

  6. this is a box

  7. this is a box

  8. this is a box

</>复制代码

  1. .maskWrap{
  2. position: fixed;
  3. top: 0;
  4. left: 0;
  5. z-index: 999;
  6. width: 100%;
  7. height: 100%;
  8. display: none;
  9. }
  10. .mask{
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. bottom: 0;
  15. right: 0;
  16. z-index: 1;
  17. background-color: rgba(0, 0, 0, .7);
  18. }
  19. .box{
  20. position: absolute;
  21. top: 50%;
  22. left: 50%;
  23. transform: translate3d(-50%, -50%, 0);
  24. z-index: 2;
  25. width: 200px;
  26. height: 200px;
  27. overflow-y: scroll;
  28. -webkit-overflow-scrolling : touch;
  29. padding: 10px;
  30. background: #fff;
  31. text-align: center;
  32. }

</>复制代码

  1. var oBtn = document.getElementById("btn"),
  2. oMaskWrap = document.getElementById("maskWrap"),
  3. oMask = document.getElementById("mask"),
  4. oBox = document.getElementById("box"),
  5. oClose = document.getElementById("close");
  6. oBtn.onclick = () => {
  7. oMaskWrap.style.display = "block";
  8. }
  9. oClose.onclick = () => {
  10. oMaskWrap.style.display = "none";
  11. }
  12. oMask.addEventListener("touchstart", (e) => {
  13. e.preventDefault();
  14. });
  15. let startY = 0; // 记录开始滑动的坐标,用于判断滑动方向
  16. let status = 0; // 0:未开始,1:已开始,2:滑动中
  17. // 核心部分
  18. oBox.addEventListener("touchstart", e => {
  19. status = 1;
  20. startY = e.targetTouches[0].pageY;
  21. }, false);
  22. oBox.addEventListener("touchmove", e => {
  23. // 判定一次就够了
  24. if (status !== 1) return;
  25. status = 2;
  26. let t = e.target || e.srcElement;
  27. let py = e.targetTouches[0].pageY;
  28. let ch = t.clientHeight; // 内容可视高度
  29. let sh = t.scrollHeight; // 内容滚动高度
  30. let st = t.scrollTop; // 当前滚动高度
  31. // 已经到头部尽头了还要向上滑动,阻止它
  32. if (st === 0 && py > startY) {
  33. // console.log(st + "/" + py + "/" + startY);
  34. e.preventDefault();
  35. }
  36. // 已经到低部尽头了还要向下滑动,阻止它
  37. if ((st === sh - ch) && py < startY) {
  38. // console.log(st + "/" + (sh - ch) + "/" + py + "/" + startY);
  39. e.preventDefault();
  40. }
  41. }, false);
  42. oBox.addEventListener("touchend", e => {
  43. status = 0;
  44. }, false);

3.适用于移动端和pc端

</>复制代码

  1. var oBtn = document.getElementById("btn"),
  2. oMaskWrap = document.getElementById("maskWrap"),
  3. oMask = document.getElementById("mask"),
  4. oBox = document.getElementById("box"),
  5. oClose = document.getElementById("close");
  6. var isFixed = 0;
  7. oBtn.onclick = () => {
  8. oMaskWrap.style.display = "block";
  9. isFixed = 1;
  10. }
  11. oClose.onclick = () => {
  12. oMaskWrap.style.display = "none";
  13. isFixed = 0;
  14. }
  15. var bodyEl = document.body;
  16. var top = 0;
  17. function stopBodyScroll (isFixed) {
  18. console.log(isFixed)
  19. if (isFixed) {
  20. top = window.scrollY;
  21. bodyEl.style.position = "fixed";
  22. bodyEl.style.top = -top + "px";
  23. } else {
  24. bodyEl.style.position = "";
  25. bodyEl.style.top = "";
  26. window.scrollTo(0, top); // 回到原先的top
  27. }
  28. }
  29. // window.onscroll = stopBodyScroll(isFixed);
  30. document.addEventListener("onscroll", function (e) {
  31. stopBodyScroll(isFixed);
  32. })

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113757.html

相关文章

  • 简单实现弹出弹框页面背景半透明灰,弹框内容可滚动页面内容不可滚动的效果(JQuery)

    摘要:当弹框弹出时原页面内容不能滚动,即将样式设为原页面的内容就不会动了当弹框关闭后再将样式改为默认的中的写一个函数,再在弹框的中调用函数。弹出弹框 效果展示 实现原理 html结构比较简单,即: 遮罩层 弹框 先写覆盖显示窗口的遮罩层div.box,因为要在整个窗口显示固定,所以position要设为fixed,background设为灰色半透明,由于要遮住整个显示屏,...

    番茄西红柿 评论0 收藏0
  • 罩层 弹框 页面滚动

    摘要:第一种情况比较简单,弹框和页面都不可滚动第二种情况是弹框可滚动,页面不可滚动移动端兼容性不好,可应用于端适用于移动端记录开始滑动的坐标,用于判断滑动方向未开始,已开始,滑动中核心部分判定一次就够 第一种情况比较简单,弹框和页面都不可滚动 this is a box this is a box this is a box ...

    Pluser 评论0 收藏0
  • 移动端下弹框禁止背景滑动

    摘要:移动端下弹框禁止背景滑动茴字写法有很多种,找到最适合的才是好的。 移动端下弹框禁止背景滑动 茴字写法有很多种,找到最适合的才是好的。 以下下方法在一屛之内是可行的 body;html 设置overflow:hidden .overflow-hidden{ height: 100%; overflow: hidden; } // 弹出时 $(html, body,.pa...

    pf_miles 评论0 收藏0
  • 移动端下弹框禁止背景滑动

    摘要:移动端下弹框禁止背景滑动茴字写法有很多种,找到最适合的才是好的。 移动端下弹框禁止背景滑动 茴字写法有很多种,找到最适合的才是好的。 以下下方法在一屛之内是可行的 body;html 设置overflow:hidden .overflow-hidden{ height: 100%; overflow: hidden; } // 弹出时 $(html, body,.pa...

    baukh789 评论0 收藏0

发表评论

0条评论

lily_wang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<