我想打开一个覆盖主体滚动的模态层。为此，当图层显示时，我将 body overflow 设置为 hidden，并将 overflow 设置为在 modal 图层上滚动。在视觉上，一个滚动条替换了另一个。
在背景中，我有一个固定位置且 100% 宽的顶栏。当 body overflow 设置为 hidden 时，会发生什么情况，100% 宽度的 div(顶部栏)占用滚动条空间并且其元素向右移动。
如何防止这些元素移动？
我尝试计算 (javascript) 滚动条的宽度，并在设置 body overflow: hidden 时，给顶部栏一个 margin-right: "scrollbar width"。那没有用。
还尝试在顶部栏的右端设置一个虚拟 div，将溢出设置为滚动并强制它在打开图层时显示滚动条。这个想法是用另一个滚动条占用丢失的滚动条的空间，只在顶部容器上。这几乎奏效了，但产生了 1 或 2 像素的闪烁。不够好。
jsFiddle here with the basic problem
var body = $('body'),
main = $('.main'),
open_modal = $('.open-modal'),
close_modal = $('.close-modal'),
modal_container = $('.modal-container'),
toggleModal = function() {
body.toggleClass('body-locked');
modal_container.toggleClass('dp-block');
};
open_modal.on('click', toggleModal);
close_modal.on('click', toggleModal);
最佳答案
基本上...
打开模式时，将菜单宽度设置为其当前宽度并设置一个 window.onresize 事件处理程序，该事件处理程序会将菜单的大小调整为主体的宽度宽度。
当模式关闭时，删除固定宽度和 window.onresize 处理程序并将菜单返回到它的初始状态。
本着less === more 的精神，我已经尽可能地简化了您的代码。
var body = $('body');
var menu = $('#topBarFixed');
function toggleModal() {
menu.css('width', body.hasClass('locked') ? '' : menu.width());
window.onresize = body.hasClass('locked') ? '' : function () {
menu.css('width', body.width());
}
body.toggleClass('locked');
}
body.on('click', '.open-modal, .close-modal', toggleModal);body {
padding-top: 40px;
height: 1000px;
background: lightblue;
}
body.locked {
height: 100%;
overflow: hidden;
}
.modal-container {
display: none;
overflow-y: scroll;
position: fixed;
top: 0; right: 0;
height: 100%; width: 100%;
background-color: rgba(255, 255, 255, 0.3);
z-index: 400;
}
body.locked .modal-container {
display: block !important;
}
.modal {
height: 600px;
width: 200px;
margin: 50px auto;
background: indianred;
}
#topBarFixed {
width: 100%;
background-color: lightgray;
position: fixed;
top: 0;
left: 0;
text-align:center;
display: inline-block;
z-index: 200;
}
.topBarContent {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.inner1 {
width:30px;
line-height: 40px;
}
.open-modal {
position: relative;
top: 400px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="topBarFixed">
<div class="topBarContent">
<div id="inner" class="inner1">div</div>
<div id="inner" class="inner1">div</div>
<div id="inner" class="inner1">div</div>
<div id="inner" class="inner1">div</div>
<div id="inner" class="inner1">div</div>
</div>
</div>
<p>Scroll down to open layer</p>
<button class="open-modal">Open layer</button>
<div class="modal-container">
<div class="modal">
<button class="close-modal">Close layer</button>
</div>
</div>
关于javascript - 隐藏主体溢出时固定位置移动的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30898298/
我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby数组，我们在StackOverflow上找到一
当我在我的Rails应用程序根目录中运行rakedoc:app时，API文档是使用/doc/README_FOR_APP作为主页生成的。我想向该文件添加.rdoc扩展名，以便它在GitHub上正确呈现。更好的是，我想将它移动到应用程序根目录(/README.rdoc)。有没有办法通过修改包含的rake/rdoctask任务在我的Rakefile中执行此操作？是否有某个地方可以查找可以修改的主页文件的名称？还是我必须编写一个新的Rake任务？额外的问题:Rails应用程序的两个单独文件/README和/doc/README_FOR_APP背后的逻辑是什么？为什么不只有一个？
查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用
本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决
我从Ubuntu服务器上的RVM转移到rbenv。当我使用RVM时，使用bundle没有问题。转移到rbenv后，我在Jenkins的执行shell中收到“找不到命令”错误。我内爆并删除了RVM，并从~/.bashrc'中删除了所有与RVM相关的行。使用后我仍然收到此错误:rvmimploderm~/.rvm-rfrm~/.rvmrcgeminstallbundlerecho'exportPATH="$HOME/.rbenv/bin:$PATH"'>>~/.bashrcecho'eval"$(rbenvinit-)"'>>~/.bashrc.~/.bashrcrbenvversions
我需要一个非常简单的字符串验证器来显示第一个符号与所需格式不对应的位置。我想使用正则表达式，但在这种情况下，我必须找到与表达式相对应的字符串停止的位置，但我找不到可以做到这一点的方法。(这一定是一种相当简单的方法……也许没有？)例如，如果我有正则表达式:/^Q+E+R+$/带字符串:"QQQQEEE2ER"期望的结果应该是7 最佳答案 一个想法:你可以做的是标记你的模式并用可选的嵌套捕获组编写它:^(Q+(E+(R+($)?)?)?)?然后你只需要计算你获得的捕获组的数量就可以知道正则表达式引擎在模式中停止的位置，你可以确定匹配结束
有没有一种简单的方法可以将给定的整数格式化为具有固定长度和前导零的字符串？#convertnumberstostringsoffixedlength3[1,12,123,1234].map{|e|???}=>["001","012","123","234"]我找到了解决方案，但也许还有更聪明的方法。format('%03d',e)[-3..-1] 最佳答案 如何使用%1000而不是进行字符串操作来获取最后三位数字？[1,12,123,1234].map{|e|format('%03d',e%1000)}更新:根据theTinMan的
我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm
在Ruby中，是否有一种简单的方法可以将n维数组中的每个元素乘以一个数字？这样:[1,2,3,4,5].multiplied_by2==[2,4,6,8,10]和[[1,2,3],[1,2,3]].multiplied_by2==[[2,4,6],[2,4,6]]？(很明显，我编写了multiplied_by函数以区别于*，它似乎连接了数组的多个副本，不幸的是这不是我需要的)。谢谢! 最佳答案 它的长格式等价物是:[1,2,3,4,5].collect{|n|n*2}其实并没有那么复杂。你总是可以使你的multiply_by方法:c
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的