如何一次隐藏单个div而不闪烁，而是隐藏可见性

Question

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

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

我的期望：当我在$content.hide();中执行DOM时，看到我提供的图像中的html区域，其中每个{{1} }，而是我想一次隐藏特定的style="display:none"/style="display:block"（因此一次不能显示/隐藏多次，只能一次显示/隐藏），类似于＃snippet2，＃snippet1应该可以（但隐藏的元素不应包含任何element）

下面是我的代码，该代码应与element一起使用：

＃Snippet1

width/height

display:none or $el.hide()/$el.show()

$(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);
});

问题：上面的代码段（＃snippet1）应该与下面的代码（＃snippet2）相同，但不使用.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; }（＃snippet2而不闪烁）

＃snippet2

<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>

visibility

$(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);
});

请提前帮助我，谢谢！！！

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>

Answer 2

最初计算所有div的垂直开始/结束值，并独立存储此数据。非常简短地使所有div在DOM中可见（ <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintEnd_toEndOf="parent" android:background="@color/colorPrimary" tools:context=".MainActivity"> <FrameLayout android:id="@+id/fragmentLayout" android:layout_width="match_parent" android:layout_height="match_parent"> </FrameLayout> <TextClock android:id="@+id/textClock" android:layout_width="wrap_content" android:layout_height="56dp" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:layout_marginEnd="8dp" android:fontFamily="@font/digital" android:textAlignment="center" android:textColor="@color/design_default_color_background" android:textSize="50sp" android:textStyle="bold" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.502" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/completeAlarmSetUp" tools:text="12:30:01" /> ），同时使用display !== 'none'隐藏它们以计算其高度（如果不将div高度附加到DOM上，则无法计算div的高度）。 / p>

还需要制作所有可滚动的项目opacity，以便将其移除不会重排其下方的项目。这意味着javascript还需要计算项目的position: absolute位置。

然后，只要情况发生变化（每当可能需要显示/隐藏新项目时），就对照“热区”（接触导致可见的区域）的位置检查所有独立存储的位置数据。

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;
}

Answer 3

所以您在评论中说

  

但我的要求是，无论哪个内容触及该灰带，   显示出来，否则必须隐藏起来，不留宽度和高度

据此我了解到您需要一个垂直文本滚动器。为什么不使用灰色带div作为隐藏溢出的容器，然后在其中滚动内容？

    $(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>