我有一个 fiddle我想要一个点击事件将 scrollTop 动画化到 div .panel-two 的页面。我尝试了一些 jQuery 插件，但没有任何效果。我遇到的问题是，如果 div 不可见并且无法为 scrollIntoView 设置动画，我就无法使用 scrollTop。
这是 html:
<body>
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!-- Menu -->
<ul class="vertical menu">
<li><a href="#">Foundation</a></li>
<li><a href="#">Dot</a></li>
<li><a href="#">ZURB</a></li>
<li><a href="#">Com</a></li>
<li><a href="#">Slash</a></li>
<li><a href="#">Sites</a></li>
</ul>
</div>
<div id="bg">
</div>
<div class="panel panel-one">
<div class="panel-inner">
<div class="content">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit
ligula pharetra.</p>
</div>
</div>
</div>
<div class="panel panel-two">
<div class="panel-inner">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit
ligula pharetra.</p>
</div>
</div>
</body>
我计划在带有图像的 .panel-one div 中添加一个 slider ，点击图像会向上滚动相关的 div 以接管屏幕。
.panel-one div 需要占据整个屏幕，用户不能向下滚动。只有当 .panel-two div 在点击图片时向上滑动后，用户才能再次向上滚动以显示 .panel-one div . .panel-two 应该会消失在屏幕下方。
最佳答案
也许答案有点晚了，但我想这会帮助您将图像 slider 放入 panel-one:
首先我隐藏了滚动条:
$('body').css('overflow', 'hidden');
点击panel-one，您可以为panel-two设置动画:
$(".panel-one").on('click', function() {
$('html, body').animate({
scrollTop: $('.panel-two').offset().top
}, 1000, function() {
$('body').css('overflow', 'auto');
});
});
也不要忘记在动画结束时打开 overflow。
现在添加一个 scroll 监听器，以便在用户向上滚动到 panel-one 顶部时隐藏滚动条:
$(document).scroll(function() {
if ($(window).scrollTop() == 0)
$('body').css('overflow', 'hidden');
});
请看下面的演示:
$(".close-button").on('click', function() {
if ($("#offCanvas").css('margin-left') < '0') {
$("#offCanvas").css('margin-left', '0');
$(".panel").css('margin-left', '50%');
$("#bg").css('margin-left', '50%');
} else {
$("#offCanvas").css('margin-left', '-50%');
$(".panel").css('margin-left', '0');
$("#bg").css('margin-left', '0');
}
});
$('body').css('overflow', 'hidden');
$(".panel-one").on('click', function() {
$('html, body').animate({
scrollTop: $('.panel-two').offset().top
}, 1000, function() {
$('body').css('overflow', 'auto');
});
});
$(document).scroll(function() {
if ($(window).scrollTop() == 0)
$('body').css('overflow', 'hidden');
});#offCanvas {
position: fixed;
z-index: 999;
background-color: black;
width: 50%;
margin-left: -50%;
height: 100%;
}
.close-button {
position: fixed;
z-index: 1000;
}
#bg {
background-image: url('https://unsplash.it/500?random');
background-size: cover;
z-index: -1;
animation: zoom 10s;
height: 100%;
width: 100vw;
position: fixed;
-webkit-animation-fill-mode: forwards;
background-attachment: fixed;
}
@keyframes zoom {
0% {
transform: scale(1, 1);
}
100% {
transform: scale(1.1, 1.1);
}
}
html,
body {
margin: 0;
height: 100%;
}
.panel {
position: relative;
min-height: 100vh;
width: 100%;
z-index: 5;
}
.panel-fixed {
z-index: 1;
}
.panel-inner {
padding: 1em;
width: 100%;
}
.panel-fixed .panel-inner {
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
/* Base */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.panel-two {
background-color: blue;
}
.content {
position: fixed;
}
body {
overflow-x: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- Close button -->
<button class="close-button" aria-label="Close menu" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!-- Menu -->
<ul class="vertical menu">
<li><a href="#">Foundation</a>
</li>
<li><a href="#">Dot</a>
</li>
<li><a href="#">ZURB</a>
</li>
<li><a href="#">Com</a>
</li>
<li><a href="#">Slash</a>
</li>
<li><a href="#">Sites</a>
</li>
</ul>
</div>
<div id="bg">
</div>
<div class="panel panel-one">
<div class="panel-inner">
<div class="content">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit
ligula pharetra.</p>
</div>
</div>
</div>
<div class="panel panel-two">
<div class="panel-inner">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit
ligula pharetra.</p>
</div>
</div>
</body>
关于javascript - CSS - 在单击之前向上滑动一个不可见的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40341815/
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No
我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>
当我在Rails控制台中按向上或向左箭头时，出现此错误:irb(main):001:0>/Users/me/.rvm/gems/ruby-2.0.0-p247/gems/rb-readline-0.4.2/lib/rbreadline.rb:4269:in`blockin_rl_dispatch_subseq':invalidbytesequenceinUTF-8(ArgumentError)我使用rvm来管理我的ruby安装。我正在使用=>ruby-2.0.0-p247[x86_64]我使用bundle来管理我的gem，并且我有rb-readline(0.4.2)(人们推荐的最少
如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？
我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser
我有一个正在构建的应用程序，我需要一个模型来创建另一个模型的实例。我希望每辆车都有4个轮胎。汽车模型classCar轮胎模型classTire但是，在make_tires内部有一个错误，如果我为Tire尝试它，则没有用于创建或新建的activerecord方法。当我检查轮胎时，它没有这些方法。我该如何补救？错误是这样的:未定义的方法'create'forActiveRecord::AttributeMethods::Serialization::Tire::Module我测试了两个环境:测试和开发，它们都因相同的错误而失败。 最佳答案
我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll