javascript - CSS - 在单击之前向上滑动一个不可见的 div

我有一个 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">&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>

我计划在带有图像的 .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">&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>

关于javascript - CSS - 在单击之前向上滑动一个不可见的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40341815/

javascript - CSS - 在单击之前向上滑动一个不可见的 div

上一篇：html - TD 内的动画打破表格边框 : weird chrome bug?

下一篇：html - 如何正确转义 <option> 标签内的文本？