Question

在我的Angularjs应用程序中，当我点击链接时，会出现一个下拉菜单。要在菜单显示时停止在页面上滚动，我使用overflow:hidden并在菜单显示时将类添加到正文中：

但是，使用overflow:hidden也会从基于Windows的浏览器中完全删除垂直滚动条，这意味着当菜单打开时整个页面会向右移动（按滚动条的宽度）。

我可以在不完全删除滚动条的情况下停止滚动吗？也许保持滚动条容器就位，但隐藏手柄。

示例看一下https://fancy.com/ - 点击登录链接，就会出现模态。滚动条手柄消失但滚动条容器仍然存在。我怎样才能达到这个效果？

Answer 1

查看https://fancy.com/ - 点击登录链接，我们会出现模式。滚动条手柄消失但滚动条容器仍然存在。我怎样才能达到这个效果？

看起来他们只是通过为overflow-y: scroll开始设置body来执行此操作，然后在您点击时将fixed元素添加到html元素中“登录”。

然后该类影响页面的主要内容容器，将其设置为固定位置：

.fixed #container-wrapper {position:fixed;left:0;width:100%; /*[…]*/

Answer 2

将菜单放入包装div并根据需要为此div设置overflow-y:和OnLoad。

Answer 3

正如我在评论中提到的，这可以通过嵌套的div轻松完成。是的，可以使用body标签完成，但这是我下面代码中的一个非常简单的更改。您可以在此处查看效果：https://jsfiddle.net/udgj3ot5/

注意：我怀疑你是否会直接从子div调用函数，因此可能需要使用指向除this以外的元素的另一种方法。

<强> CSS

html, body {
  padding:0;
  margin:0;
  width:100%;
  height:100%;
}
div.parentDiv { /*Set this to the body if you don't want two divs*/
  width:inherit;
  height:inherit;
  overflow-y:scroll;
}

<强>的JavaScript

function toggleChildDiv(elem) {
    if (elem.style.overflow == "hidden") {
    elem.style.width = "auto";
    elem.style.height = "auto";
    elem.style.overflow = "visible"
  } else {
    elem.style.width = "100%";
    elem.style.height = "100%";
    elem.style.overflow = "hidden"
  }
}

<强> HTML

<div class="parentDiv">
  <div onclick="toggleChildDiv(this)">
    YOUR PAGE CONTENT
  </div>
</div>

使滚动条不可见而不删除它 - Windows浏览器

3 个答案: