Question

scrollTop函数工作正常，但仅当元素没有设置 display：none ;

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

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

Answer 1

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

我为你创造了一个榜样，了解发生了什么。显然，我对你的项目了解不多，所以请记住（http://jsbin.com/jociy/1）。

你不能滚动显示：无元素的原因是元素不会在渲染元素之间占用任何空间 - 窗口上没有该元素实际存在的X或Y位置，所以&& ＃39;没有值可滚动到！

让我们看一下以下代码，例如：

$(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！或者保持可见性：隐藏！或者，如果显示：无客户端发生，您可以在修改元素之前，获取所有eWindow元素位置并将其保存在集合中，以备将来参考！

希望这有帮助！

Answer 2

我不了解您项目的详细信息，但我想到了两件事。

首先，也许您可以在将显示更改为none之前执行 scrollTop（），因此，如果元素将在下次滚动到顶部时显示。

然后您可以尝试隐藏元素而不将显示更改为无，而是改变其不透明度，例如fadeOut（）或hide（）/ show（）

也许这会有所帮助..

jQuery：如果元素不可见，则scrollTop不起作用

2 个答案: