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

在我的Angularjs应用程序中，我有一个下拉菜单，当我点击一个链接时出现。要停止滚动页面上同时显示菜单时我用overflow:hidden和类添加到身体的时候显示菜单时：使滚动条不可见而不删除它 - Windows浏览器

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

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

例看看https://fancy.com/ - 单击登录链接，模态应该会出现。滚动条句柄消失，但滚动条容器保持不变。我怎样才能达到这个效果？

来源

2016-06-07 tommyd456

可以保证金右添加到身体时溢出隐藏 –

谢谢，但没有达到预期的效果。该页面仍然向右移动。 – tommyd456

我已经添加了所需效果的示例。 – tommyd456

看看https://fancy.com/ - 点击登录链接，模态应该出现。滚动条句柄消失，但滚动条容器保持不变。我怎样才能达到这个效果？

看起来他们只是这样做具有用于bodyoverflow-y: scroll将开始使用，然后当你点击“登录”一类fixed被添加到html元素。

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

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

来源

2016-06-07 13:45:26 CBroe

将菜单放入包装div，并设置overflow-x:和overflow-y:，因为您需要此div。

来源

2016-06-07 13:37:39

正如我在评论中提到的，这可以很容易地嵌套的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>

来源

2016-06-07 13:48:56

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

回答

相关问题