javascript - 如何在不闪烁的情况下一次隐藏单个 div 而不是设置可见性隐藏

Question

我想一次隐藏一个div，这样可以避免下方闪烁(如图所示)

注意:我不能使用 visibility:hidden 或 visibility:show 或 $sel.css('visibility','隐藏'); 或 $sel.css('visibility','show');

我的期望:当我在 DOM 中执行 $content.hide(); 时，会看到我提供的图像中的 html 区域 style="display:none"/style="display:block" 发生在每个 element 上，而我想隐藏那个特定的 element一次(因此一次没有多个显示/隐藏，只有一个显示/隐藏)类似于#snippet2，#snippet1 应该可以工作(但隐藏元素不应包含任何宽度/高度)

下面是我的代码，它应该与 display:none 或 $el.hide()/$el.show() 一起工作:

#Snippet1

$(function() {
  var pos = 1;
  var ii = 0;

  var centerbandTop = $('.center-band').offset().top;
  var centerbandBottom = $('.center-band').outerHeight() + centerbandTop;
  $('.contents').hide();
  var intId = setInterval(function() {
    ii++;
    pos = -ii;
    //console.log(pos);
    //if (pos )
    $('.contents').each(function() {
      var $content = $(this);
      var contentTop = $content.offset().top;
      var contentBottom = $content.outerHeight() + contentTop;
      
     $content.hide();
      
      //console.log($content.position().top, centerbandTop, contentBottom);
      if (centerbandBottom > contentTop && centerbandTop < contentBottom)
        $content.show();
    });

    $('.container').css({
      // '-webkit-transform' : 'translate(0,' + pos + ')',
      transform: 'translateY(' + pos + 'px)'
    });

  }, 100);
});

.container{
   width: 100%;
    height: 100%;
    background: #000000d6;
    font-size: 19px;
    color: #a19999;
    position: relative;
}

.contents{
    margin-bottom: 15px;
    border-bottom: 1px solid #424242;
    padding: 20px;
    visibility: hidden;
}

.center-band{
    width: 98%;
    height: 78px;
    z-index: 200;
    background: #b4b1b147;
    position: fixed;
    top: 50%;
}

.wrapper{
  position: relative;
}

.over{
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="container">
      <div class="contents"> (1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
      <div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
      <div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
      <div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
      <div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
      <div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
      <div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
      <div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
      <div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
      <div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>

    </div>
    <div class="center-band"> </div>
  </div>

问题:上面的代码片段(#snippet1)应该和下面的代码片段(#snippet2)一样工作，但是没有使用visibility(#snippet2 Working without flashing)

#snippet2

$(function() {
  var pos = 1;
  var ii = 0;

  var centerbandTop = $('.center-band').offset().top;
  var centerbandBottom = $('.center-band').outerHeight() + centerbandTop;

  var intId = setInterval(function() {
    ii++;
    pos = -ii;
    //console.log(pos);
    //if (pos )
    $('.contents').each(function() {
      var $content = $(this);
      var contentTop = $content.offset().top;
      var contentBottom = $content.outerHeight() + contentTop;
      
      $content.css('visibility', 'hidden');
      
      //console.log($content.position().top, centerbandTop, contentBottom);
      if (centerbandBottom > contentTop && centerbandTop < contentBottom)
        $content.css('visibility', 'visible');
    });

    $('.container').css({
      // '-webkit-transform' : 'translate(0,' + pos + ')',
      transform: 'translateY(' + pos + 'px)'
    });

  }, 100);
});

/* Styles go here */

.container{
   width: 100%;
    height: 100%;
    background: #000000d6;
    font-size: 19px;
    color: #a19999;
    position: relative;
}

.contents{
    margin-bottom: 15px;
    border-bottom: 1px solid #424242;
    padding: 20px;
    visibility: hidden;
}

.center-band{
    width: 98%;
    height: 78px;
    z-index: 200;
    background: #b4b1b147;
    position: fixed;
    top: 50%;
}

.wrapper{
  position: relative;
}

.over{
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="wrapper">
    <div class="container">
      <div class="contents"> (1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
      <div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
      <div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
      <div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
      <div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
      <div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
      <div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
      <div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
      <div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
      <div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>

    </div>
    <div class="center-band"> </div>
  </div>

请帮助我提前谢谢!!!

Answer 1

很难理解您的问题，但从您提供的代码片段来看，您似乎需要从根本上重新考虑您的方法。

您的代码将“容器”div 向上移动，然后计算所包含元素的位置，但问题是当您隐藏或显示一个元素时，所有其他元素都会相应地移动。因此，当“内容 1”超出中心带并且您将其隐藏时，它不再占用空间并且“内容 2”移动到“内容 1”所在的位置。但是，由于“内容 1”位于中心带上方，现在“内容 2”位于中心带上方，您也将隐藏它。因此在您的代码中，一旦“内容 1”超出中心带，所有内容都将被隐藏。

有很多方法可以解决这个问题，最适合您情况的方法可能取决于您真正想要完成的事情的细节，以及您的问题中不清楚的细节。使用 CSS overflow: hidden 可能是最有效的，而且您并没有真正解释该解决方案的问题所在。

另一种选择是调整容器的位置以补偿隐藏元素。您还必须有一些方法来确定何时显示进入盒子的项目，您不能从它们的位置这样做，因为它们是隐藏的。这个片段并不理想，并且由于边距存在一些小故障，但它展示了这个概念。

$(function() {
  var pos = 0;
  var showNext = false;

  var centerbandTop = $('.center-band').offset().top;
  var centerbandBottom = $('.center-band').outerHeight() + centerbandTop;

  var scroll = function() {
    pos--; // move the list up one pixel

    $('.contents').each(function() {
      var $content = $(this);
      // If the previous "contents" moved up enough
      // to make room for this hidden element, show it.
      if (showNext) {
        $content.show();
        showNext = false;
      } else if ($content.is(':hidden')) // nothing to do
        return;

      // We have to wait until after we have shown 
      // the element to compute its position.
      var contentTop = $content.offset().top;
      var contentBottom = $content.outerHeight() + contentTop;


      if (contentBottom < centerbandTop) {
        // If the element has exited the top of the
        // band, hide it, and move the container
        // down to compensate for removing this 
        // element.
        pos = pos + $content.outerHeight(true);
        $content.hide();
      } else if (contentTop > centerbandBottom) {
        // If the element is below the band,
        // hide it. Really this only needs to
        // be done the first time through.
        $content.hide();
      }
      // If there is room in the center band
      // below this element, show the next one
      showNext = contentBottom < centerbandBottom;
      $('.container').css({
        transform: 'translateY(' + pos + 'px)'
      });
    });


  }
  // We start with the contents "visibility: hidden"
  // and all the elements displayed so we do not 
  // see them but still can compute their positions.
  // One pass through scroll() then hides everything
  // that needs to be hidden.
  scroll();
  // Now we can make everthing visible
  $('.contents').css('visibility', 'visible');
  // And now we set up the scrolling timer
  var intId = setInterval(scroll, 100);

});

/* Styles go here */

.container {
  width: 100%;
  height: 100%;
  background: #000000d6;
  font-size: 19px;
  color: #a19999;
  position: relative;
}

.contents {
  margin-bottom: 15px;
  border-bottom: 1px solid #424242;
  padding: 20px;
  visibility: hidden;
}

.center-band {
  width: 98%;
  height: 78px;
  z-index: 200;
  background: #b4b1b147;
  position: fixed;
  top: 50%;
}

.wrapper {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class="contents"> (1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
    <div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
    <div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
    <div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
    <div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
    <div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
    <div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
    <div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
    <div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
    <div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>

  </div>
  <div class="center-band"> </div>
</div>