Question

我已经制作了这个小盒子，只需点击一下按钮即可从屏幕底部激活，当你再次点击该按钮时，它会消失。

它外观和工作非常好，但有一个问题。为防止人们向下滚动并看到该框，我在overflow-y: hidden上有body。问题是，除了那个盒子之外还有很多其他内容，我确实希望用户能够向下滚动，同时保持盒子隐藏和效果。

CSS的主要部分：

body {
  padding: 0;
  margin: 0;
  position: relative;
  overflow-y: hidden;
}
.box-wrapper,
.box {
  position: absolute;
  bottom: 2em;
  left: 1em;
  z-index: 9;
}
.box-wrapper {
  transition-duration: 600ms;
  height: 100%;
}
.box-wrapper.hidden {
  transform: translate(0, 100%);
}

HTML：

<div class="box-wrapper hidden">
  <div class="box">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, quos?
  </div>
</div>

然后有一个小脚本在点击按钮时删除.hidden。您可以在the fiddle中看到有效的演示。

我能做些什么吗？感谢。

Answer 1

使用position:fixed代替position:absolute; http://jsfiddle.net/pcrv8ywy/2/

.box-wrapper,
.box {
position: fixed;
bottom: 2em;
left: 1em;
 z-index: 9;
}

.btn-circle {
background: #069;
color: #fff;
padding: 0.5em 0.8em;
border: none;
box-sizing: border-box;
border-radius: 50%;
font-size: 26px;
font-weight: bold;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
cursor: pointer;
position: fixed;
bottom: 1em;
left: 1em;
z-index: 10;
}

Answer 2

好的，我明白了。
我需要做的是添加覆盖整个屏幕的叠加层，并使用overflow-y: hidden。然后，我把所有内容都放在里面。这样，身体仍在滚动，但我的效果仍然存在。

您可以查看here。

编辑：这不是一个好的解决方案，因为它覆盖整个机身并阻止任何功能。我仍然需要帮助。

滚动溢出-y：隐藏

2 个答案: