如何隐藏单个div而不闪烁，而是设置为visibility:hidden？

Question

我想一次只隐藏一个div，以避免下面的闪烁（如图所示）

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

我的期望：当我在DOM中执行 $content.hide();时，请参见我提供的图像中的html区域，其中每个元素都发生了style="display:none"/style="display:block"，我希望一次只隐藏那个特定的元素，而不是多个元素同时显示/隐藏，类似于#snippet2，#snippet1应该可以工作（但隐藏的元素不应包含任何width/height）

以下代码应该可以使用display:none or $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在没有闪烁的情况下工作） #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>

请帮助我，提前感谢！

- EaBengaluru

---

你是指 devtools 显示 DOM 中有变化的部分吗？这就是你想要隐藏的内容？ - Jabberwocky

为什么你关心DevTools并会闪烁DOM更改？ - Matthias

我认为您的问题仍然令人困惑。具体问题是什么？表现不如您预期的是什么？您期望它如何执行？ - Nathan

我很乐意帮忙，但我不明白你想解决什么问题。 - Swazimodo

在 if (centerbandBottom > contentTop && centerbandTop < contentBottom) 之前加上 console.log(contentTop, contentBottom)，你会注意到当使用 $content.hide() 时，contentTop 和 contentBottom 的值是相对固定的（永远不会改变）。因此，它们要么保持隐藏，要么在隐藏和显示之间永久切换（这会导致闪烁）。 - IronGeek

Answer 1

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

你的代码将 "container" div 向上移动，然后计算包含元素的位置，但问题在于当你隐藏或显示一个元素时，所有其他元素都会响应地移动。所以当 "contents 1" 超过中心带并且你隐藏它时，它停止占据空间，"contents 2" 移动到 "contents 1" 的位置。然而，由于 "contents 1" 在中心带上方，现在 "contents 2" 也在中心带上方，你也要把它隐藏。因此，在你的代码中，一旦 "contents 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>

- Old Pro

Answer 2

最初计算所有div的垂直起始/结束值并将此数据独立存储。在DOM中非常简短地使所有div可见(display !== 'none')，同时使用opacity隐藏它们，以便计算它们的高度(没有办法计算div高度而不将其附加到DOM)。

还需要使所有可滚动的项position: absolute，以便它们的删除不会重新排列它们下面的项。这意味着JavaScript还需要为项计算top位置。

然后，每当有更改时(每当可能需要显示/隐藏新项时)，检查所有独立存储的位置数据与“热区”的位置(接触时导致可见性)。

window.onload = () => {
  
  let positions = []; // Independently store positional data for text items
  
  // Keep references to some useful DOM elements
  let hotZone = document.getElementsByClassName('hot-zone')[0];
  let scroller = document.getElementsByClassName('scroller')[0];
  let scrollerHeight = scroller.getElementsByClassName('height')[0];
  let items = document.getElementsByClassName('item');
  
  let totalHeight = 0; // We'll track total height of items as we go
  for (let i = 0; i < items.length; i++) {
    let { height } = items[i].getBoundingClientRect();
    items[i].style.top = `${Math.round(totalHeight)}px`;
    items[i].style.display = 'none';
    positions.push([ totalHeight, height ]);
    totalHeight += height;
  }
  
  // Make sure the scroller doesn't shrink when we remove its children
  scrollerHeight.style.height = `${Math.round(totalHeight)}px`;
  
  let reevaluate = () => {
    
    let hotRect = hotZone.getBoundingClientRect();
    let scrollRect = scroller.getBoundingClientRect();
    
    for (let i = 0; i < items.length; i++) {
      let [ itemTop, itemHeight ] = positions[i];
      itemTop += scrollRect.top; // Make relative to scroller
      itemTop -= scroller.scrollTop; // Make relative to scroll amt
      
      let tooHigh = itemTop + itemHeight < hotRect.top;
      let tooLow = itemTop > hotRect.bottom;
      let disp = (tooHigh || tooLow) ? 'none' : 'block';
      if (disp !== items[i].style.display) items[i].style.display = disp;
    }
  };
  
  // Immediately call `reevaluate` to initially show items
  reevaluate();
  
  // Now everything is nice so make the scroller completely opaque
  document.getElementsByClassName('scroller')[0].style.opacity = '1';
  
  // Setup listeners to call `reevaluate` when there's a possibility
  // new items need to show. E.g., the "hot zone" has moved, the items
  // have moved, scrolls have happened, etc.
  scroller.addEventListener('scroll', reevaluate);
  
};

.contain {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: #000000;
}
.scroller {
  position: relative;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  color: #ffffff;
  opacity: 0; /* Initially invisible (to avoid 1-frame flicker) */
}
.scroller > .height {
  position: relative;
  width: 0; height: 0; /* Invisible; lends the scroller its height */
}
.scroller > .item {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  outline: 1px solid rgba(255, 0, 0, 0.8);
}
.hot-zone {
  position: absolute;
  left: 0; top: 30%;
  width: 100%; height: 20%;
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8);
  z-index: 2;
  pointer-events: none;
}

<div class="contain">
  <div class="hot-zone"></div>
  <div class="scroller">
    <div class="height"></div>
    <div class="item">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="item">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="item">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="item">Not too much here :)</div>
    <div class="item">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="item">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="item">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="item">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="item">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="item">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="item">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="item">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="item">THIS<br/>ONE<br/>IS<br/>REALLY<br/>QUITE<br/>LONG<br/>INDEED<br/>GOOD<br/>SIR</div>
    <div class="item">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="item">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="item">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="item">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="item">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="item">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="item">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="item">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="item">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="item">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="item">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="item">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>
</div>

- Gershom Maes

Answer 3

所以你在评论中说：

但我的要求是任何接触到灰色带的内容都应该显示，否则就必须隐藏，不占用宽度和高度。

从这个意思来看，你需要一个垂直文本滚动条。为什么不将灰色带div作为容器，使用overflow hidden，然后通过它来滚动内容呢？

    $(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: relative;
        /*top: 50%;*/
        overflow: hidden;
    }

    .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>
        some static text above
    </div>
    <div class="center-band">
        <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>
    <div>
        some static text below
    </div>
</div>

- Dan D.

---

这不是我的要求，我的要求是任何与该带有关的内容都必须显示，其他内容必须隐藏（不占用宽度和高度）。 - EaBengaluru