CSS - 单击时向上滑动一个在此之前不可见的 div
Posted
技术标签:
【中文标题】CSS - 单击时向上滑动一个在此之前不可见的 div【英文标题】：CSS - slide up a div on click that is not visible before that 【发布时间】：2017-03-13 12:21:04 【问题描述】：我有一个页面的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 中添加一个带有图像的滑块，单击图像会向上滚动相关的 div 以占据屏幕。
.panel-one div 需要占据整个屏幕并且用户不能向下滚动。只有当.panel-two div 在单击图像时向上滑动时，用户才能够向上滚动以再次显示.panel-one div。 .panel-two 应该会消失在屏幕下方。
【问题讨论】：
我不明白你的目标是什么。你想创建某种“向下滚动”/“查看更多”按钮来将页面滚动到下一部分/div/panel 吗？ 对不起，我想帮忙，但我不明白你想达到什么目的。您是否看过任何可以向我们展示的工作示例？ 【参考方案1】：也许答案有点晚了，但我想这将有助于您将图像滑块放入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>【讨论】：
@Leff 让我知道您对此答案的看法，谢谢！以上是关于CSS - 单击时向上滑动一个在此之前不可见的 div的主要内容，如果未能解决你的问题，请参考以下文章