javascript - jQuery:如果元素不可见，则 scrollTop 不起作用

Question

scrollTop 函数工作正常，但前提是元素没有设置 display: none；

我有一个主要元素 eWindow，在这个元素中还有许多其他元素，其中包含一些 JavaScript 代码、Ajax 调用等等。一切都完成后，我只想显示这个主要元素 eWindow。所以我会设置 display: block;

但是这个解决方案对我不起作用。如果我只是从我的样式表中删除 display: none，scrollTop 将开始正常工作。

Answer 1

请记住，visibility: hidden 会隐藏元素，占用布局中的空间。 display: none 从文档中删除元素，即使 HTML 位于源代码中也是如此。

我已经为您创建了一个示例，以了解发生了什么。显然，我对您的元素了解不多，所以请记住这一点 ( http://jsbin.com/jociy/1 )。

您不能滚动到 display:none 元素的原因是该元素在呈现的元素之间不占用任何空间 - 窗口上没有该元素实际存在的 X 或 Y 位置，因此没有滚动值到!

让我们看看下面的代码，它举例说明了这一点:

$(document).ready(function(){

 $('#scrollTo').on('click', function(){

    // get the element position
    var toPosition = $(".scrollTo").offset().top;

    // scroll to the element position
    $('html, body').animate({
      scrollTop: toPosition
    }, 'slow', function(){

      $(".scrollTo")
        .css("background-color", "")
        .css("background-color", "black");

      // let's remove the element after awhile
      setTimeout(function(){

        $(".scrollTo")
          .fadeOut(function(){

            $(this).css("display", "none");

            alert("If you click on 'Click to ScrollTo this time, it wont work as expected, because the element does not take any position between the rendered elements.'");

          });

      }, 3000);

    });

 });

});

一些 HTML 元素可以帮助您:

  <button id="scrollTo">Click to ScrollTo!</button>

  <div class="foo red">I'm red!</div>
  <div class="foo green">I'm green!</div>
  <div class="foo blue">I'm blue!</div>
  <div class="foo yellow">I'm yellow!</div>
  <div class="foo red">I'm red!</div>
  <div class="foo green">I'm green!</div>
  <div class="foo blue">I'm blue!</div>
  <div class="foo yellow">I'm yellow!</div>
  <div class="foo red">I'm red!</div>
  <div class="foo green">I'm green!</div>
  <div class="foo blue scrollTo">I'm blue!</div>
  <div class="foo yellow">I'm yellow!</div>
  <div class="foo red">I'm red!</div>
  <div class="foo green">I'm green!</div>
  <div class="foo blue">I'm blue!</div>
  <div class="foo yellow">I'm yellow!</div>
  <div class="foo red">I'm red!</div>
  <div class="foo green">I'm green!</div>
  <div class="foo blue">I'm blue!</div>
  <div class="foo yellow">I'm yellow!</div>
  <div class="foo green">I'm green!</div>
  <div class="foo blue scrollTo">I'm blue!</div>
  <div class="foo yellow">I'm yellow!</div>
  <div class="foo red">I'm red!</div>
  <div class="foo green">I'm green!</div>
  <div class="foo blue">I'm blue!</div>
  <div class="foo yellow">I'm yellow!</div>
  <div class="foo red">I'm red!</div>
  <div class="foo green">I'm green!</div>
  <div class="foo blue">I'm blue!</div>
  <div class="foo yellow">I'm yellow!</div>

示例 CSS 样式:

.foo {
  font-family: arial, sans-serif;
  margin: 10px;
  padding: 25px;
  opacity: 0.6;
}
.red {
  background-color: red;
  color: #fff;
}
.green {
  background-color: green;
  color: #fff;
}
.blue {
  background-color: blue;
  color: #fff;
}
.yellow {
  background-color: yellow;
  color: #000;
}

一个可能的解决方案，例如，将不透明度设置为 0，将高度设置为 0px!或者保持可见性:隐藏!或者，如果客户端出现 display:none，您可以在修改元素之前，获取所有 eWindow 元素位置并将其保存在一个集合中，以备将来引用!

希望这对您有所帮助!