问题：

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

慕才

2023-03-14

我有一个小提琴的页面，我想点击事件动画scrollTop到div。我尝试了一些jQuery插件，但没有什么工作。我的问题是，我不能使用scrollTop，如果div不可见，并且不能动画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>

我计划在中使用一个滑块。面板一div，其中包含图像，单击图像将向上滚动相关div以接管屏幕。

。第一面板div需要占据整个屏幕，用户不能向下滚动。只有一次。面板二div在点击图像时向上滑动，如果用户能够向上滚动显示。面板一div再次显示<代码>。面板二应消失在屏幕下方。

袁鸿畅

2023-03-14

也许答案有点晚了，但我想这将有助于您将图像滑块放在第一面板上：

首先，我隐藏滚动条：

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

在setp-one单击上，您可以动画到setp-one：

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

另外，不要忘记在动画结束时打开溢出。

现在添加一个scroll监听器来隐藏滚动条，一旦用户向上滚动到第一面板的顶部：

$(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个答案

相关问答

相关文章

相关阅读

相关工具

相关文档