CSS - 在点击之前向上滑动div,之前不可见

Question

CSS - 在点击之前向上滑动div,之前不可见

我有一个页面的小提琴,我想在点击事件动画scrollTop到div .panel-two.我尝试了一些jQuery插件但没有任何效果.我遇到的问题是,如果div不可见且不能动画,我就无法使用scrollTop scrollIntoView.

这是html:

<body>

  <!-- Close button -->
  <button class="close-button" aria-label="Close menu" type="button" data-close>
    <span aria-hidden="true">&times;</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>

Run Code Online (Sandbox Code Playgroud)

我计划在.panel-onediv中有一个带图像的滑块,然后单击图像然后滚动相关的div以接管屏幕.

该.panel-oneDIV需要接管整个屏幕,用户应不能向下滚动.只有当.panel-twodiv在点击图像时滑动时,用户才能够向上滚动以.panel-one再次显示div..panel-two然后应该消失在屏幕下方.

Answer 1

kuk*_*kuz 0

也许答案有点晚了，但我想这将帮助您将图像滑块放置在panel-one：

首先我隐藏滚动条：
```
$('body').css('overflow', 'hidden');
```
Run Code Online (Sandbox Code Playgroud)

单击时panel-one，您可以设置动画panel-two：

$(".panel-one").on('click', function() {
  $('html, body').animate({
    scrollTop: $('.panel-two').offset().top
  }, 1000, function() {
    $('body').css('overflow', 'auto');
 });
});

Run Code Online (Sandbox Code Playgroud)

overflow也不要忘记在动画结束时打开。

现在添加一个scroll监听器，以便在用户滚动到顶部时隐藏滚动条panel-one：
```
$(document).scroll(function() {
  if ($(window).scrollTop() == 0)
    $('body').css('overflow', 'hidden');
});
```
Run Code Online (Sandbox Code Playgroud)

请参阅下面的演示：

$('body').css('overflow', 'hidden');

Run Code Online (Sandbox Code Playgroud)

$(".panel-one").on('click', function() {
  $('html, body').animate({
    scrollTop: $('.panel-two').offset().top
  }, 1000, function() {
    $('body').css('overflow', 'auto');
 });
});

Run Code Online (Sandbox Code Playgroud)

$(document).scroll(function() {
  if ($(window).scrollTop() == 0)
    $('body').css('overflow', 'hidden');
});

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，3 月前
查看次数：	441 次
最近记录：	9 年，1 月前