Question

所以，如果这已经得到了回答，那么请指引我到正确的地方......我想我找不到答案的大部分原因是因为我无法弄清楚如何正确地问它哈哈。

我正在建立一个移动网站。看看nim.matthewjonat.com然后用chrome检查并按下ctrl + shift + m然后你就会在类似的环境中看到我而不需要看手机。

我有一个div，它覆盖了所有内容，底部有一个箭头，你需要点击它来查看网站的其余部分。

我在想的是，如果你第一次在手机上访问该页面，你会在你弄清楚需要点击箭头之前本能地想要滚动。这很好但是如果你在第一个div存在时滚动（它是位置：固定）滚动下面的内容但是第一个div只是坐在那里所以你可能潜在地位于页面的底部然后你弄清楚你必须单击箭头以查看该站点。

我猜这将涉及某种形式的javascript，这很好。我真的不确定在哪里看......

问题是我甚至不确定它的滚动我想禁用它作为移动设备吗？在有人点击箭头之前，是否需要禁用某种触摸事件？

提前致谢！

马特

Answer 1

我从CSS开始，从body元素开始。

  body.show-overlay {
    overflow:hidden; 
  }
  body.show-overlay .overlay {
    display:block;
  }
  .overlay {
    display:none;
    position:fixed;
    top:0;left:0;
    width:100%;height:100%;
    background-color: rgba(0,0,0, 0.75);
  }

当正文具有类show-overlay时，将隐藏溢出并显示叠加层。然后使用JS作为click事件处理程序从正文中删除该类

document.getElementById('close-overlay').addEventListener('click', function (event) {
    var body = document.body;
    var className = 'show-overlay';

    if (body.classList) {
      body.classList.remove(className);
    }
    else {
      body.className = body.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
    }
})

禁用滚动，直到div隐藏在移动设备上

1 个答案: