切换多个溢出y元素时的位置位移 [英] Position displacement when toggling several overflow-y Elements
问题描述
我有一个问题，我不知道如何解决，希望有人在这里可以淡化一些光。
I have a problem which I don't know how to solve, hopefully someone here can shed some light into it.
我有一个非常简单的布局a href =http://jsbin.com/UFoRIYex/586 =nofollow> JSBin ）具有水平居中的标题，某些内容可以体验垂直滚动，粘性页脚和画布外导航菜单。我想阻止用户在侧边栏打开时滚动页面，我通过在< html> 标签上切换一个类来实现：
I have a very simple layout (JSBin) with a horizontally centered header, some content to experience vertical scrolling, a sticky footer and an off-canvas navigation menu. I want to prevent the user from scrolling the page when the sidebar is opened, I'm doing that by toggling a class on the <html> tag:
$('button').click(function () {
$('html').toggleClass('sidebar');
});
.sidebar 进入视图并禁用对内容的滚动：
The .sidebar class will transition the sidebar into view and disable scrolling on the content:
html {
overflow-y: scroll; /* default state, always shows scrollbar */
}
html.sidebar {
overflow-y: hidden; /* hides scrollbar when .sidebar is on canvas */
}
html.sidebar aside {
-webkit-transform: translate3d(-100%, 0, 0); /* places .sidebar on canvas */
}
问题是，元素在< html> 滚动条的宽度。
The problem is, it displaces every element in the page by whatever width the <html> scrollbar had.
有任何方法来防止（最好不使用Javascript）？
Is there any way to prevent this shift in position (preferably without resorting to Javascript)?
这是 JSBin编辑器。
更新 ：似乎Javascript不是一个选项，滚动宽度计算是不可靠的。
Update: Seems that Javascript isn't an option, the scroll width calculation is not reliable at all.
推荐答案
code> ，以补偿宽度变化
You can toggle the margin-right of .container to compensate for the change in width
$(function () {
$('button').click(function () {
var marginR = $(".container").css("margin-right") == sWidth+"px" ? "auto" : sWidth;
$(".container").css("margin-right", marginR);
$('html').toggleClass('sidebar');
});
});
function getScrollbarWidth() {
var outer = document.createElement("div");
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps
document.body.appendChild(outer);
var widthNoScroll = outer.offsetWidth;
// force scrollbars
outer.style.overflow = "scroll";
// add innerdiv
var inner = document.createElement("div");
inner.style.width = "100%";
outer.appendChild(inner);
var widthWithScroll = inner.offsetWidth;
// remove divs
outer.parentNode.removeChild(outer);
return widthNoScroll - widthWithScroll;
}
var sWidth = getScrollbarWidth();
滚动条宽度计算取自此回答
这篇关于切换多个溢出y元素时的位置位移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
