Question

我有一个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中设置一个滑块，其中点击图片然后滚动关联的div以接管屏幕。

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

Answer 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">&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>

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

1 个答案: