How to hide single div at a time without flashing rather setting visibility hidden
5
i want to hide a single div at a time so that below flashing can be avoided(shown in image)
NOTE: i cannot use visibility:hidden or visibility:show or $sel.css('visibility','hidden'); or $sel.css('visibility','show');
My Expectation: when I do $content.hide(); in the DOM see html area in image provided by me where style="display:none"/style="display:block" is happening for every element, rather I want to hide that particular element at a time (so no multiple display/hide at a time, only one display/hide) similar to #snippet2, #snippet1 should work (but hidden element should not contain any width/height)
below is my code which should work with 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>Question: Above snippet(#snippet1) should work as same as below(#snippet2) one but without using 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>Please help me thanks in advance!!!
javascript jquery node.js
asked Nov 12 '18 at 17:13
skBangalore
53211
|
show 17 more comments
5
i want to hide a single div at a time so that below flashing can be avoided(shown in image)
NOTE: i cannot use visibility:hidden or visibility:show or $sel.css('visibility','hidden'); or $sel.css('visibility','show');
My Expectation: when I do $content.hide(); in the DOM see html area in image provided by me where style="display:none"/style="display:block" is happening for every element, rather I want to hide that particular element at a time (so no multiple display/hide at a time, only one display/hide) similar to #snippet2, #snippet1 should work (but hidden element should not contain any width/height)
below is my code which should work with 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>Question: Above snippet(#snippet1) should work as same as below(#snippet2) one but without using 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>Please help me thanks in advance!!!
javascript jquery node.js
asked Nov 12 '18 at 17:13
skBangalore
53211
2
Do you mean the part where devtools shows that something is changing in the dom? That's what you want to hide?
– Jabberwocky
Nov 12 '18 at 17:25
3
Why do you care about DevTools and it flashing its DOM changes?
– Matthias Dailey
Nov 12 '18 at 17:25
1
I think your question is still confusing. What exactly is the problem? What's not performing how you would expect? How do you expect it to perform?
– Nathan
Nov 14 '18 at 17:51
2
I'd love to help but I dont understand what you are trying to solve.
– Swazimodo
Nov 14 '18 at 18:06
2
Put aconsole.log(contentTop, contentBottom)just beforeif (centerbandBottom > contentTop && centerbandTop < contentBottom)and you'll notice that when you use$content.hide()the value ofcontentTopandcontentBottomare relatively fixed (never changes). So they either stay hidden or toggled forever between hidden and shown (which causes the flashes)
– IronGeek
Nov 15 '18 at 4:12
|
show 17 more comments
5
5
5
i want to hide a single div at a time so that below flashing can be avoided(shown in image)
NOTE: i cannot use visibility:hidden or visibility:show or $sel.css('visibility','hidden'); or $sel.css('visibility','show');
My Expectation: when I do $content.hide(); in the DOM see html area in image provided by me where style="display:none"/style="display:block" is happening for every element, rather I want to hide that particular element at a time (so no multiple display/hide at a time, only one display/hide) similar to #snippet2, #snippet1 should work (but hidden element should not contain any width/height)
below is my code which should work with 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>Question: Above snippet(#snippet1) should work as same as below(#snippet2) one but without using 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>Please help me thanks in advance!!!
javascript jquery node.js
asked Nov 12 '18 at 17:13
skBangalore
53211
i want to hide a single div at a time so that below flashing can be avoided(shown in image)
NOTE: i cannot use visibility:hidden or visibility:show or $sel.css('visibility','hidden'); or $sel.css('visibility','show');
My Expectation: when I do $content.hide(); in the DOM see html area in image provided by me where style="display:none"/style="display:block" is happening for every element, rather I want to hide that particular element at a time (so no multiple display/hide at a time, only one display/hide) similar to #snippet2, #snippet1 should work (but hidden element should not contain any width/height)
below is my code which should work with 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>Question: Above snippet(#snippet1) should work as same as below(#snippet2) one but without using 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>Please help me thanks in advance!!!
$(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>$(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>$(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>$(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>javascript jquery node.js
javascript jquery node.js
asked Nov 12 '18 at 17:13
skBangalore
53211
asked Nov 12 '18 at 17:13
skBangalore
53211
edited Nov 15 '18 at 2:49
asked Nov 12 '18 at 17:13
skBangalore
53211
asked Nov 12 '18 at 17:13
skBangalore
53211
asked Nov 12 '18 at 17:13
skBangalore
53211
53211
2
Do you mean the part where devtools shows that something is changing in the dom? That's what you want to hide?
– Jabberwocky
Nov 12 '18 at 17:25
3
Why do you care about DevTools and it flashing its DOM changes?
– Matthias Dailey
Nov 12 '18 at 17:25
1
I think your question is still confusing. What exactly is the problem? What's not performing how you would expect? How do you expect it to perform?
– Nathan
Nov 14 '18 at 17:51
2
I'd love to help but I dont understand what you are trying to solve.
– Swazimodo
Nov 14 '18 at 18:06
2
Put aconsole.log(contentTop, contentBottom)just beforeif (centerbandBottom > contentTop && centerbandTop < contentBottom)and you'll notice that when you use$content.hide()the value ofcontentTopandcontentBottomare relatively fixed (never changes). So they either stay hidden or toggled forever between hidden and shown (which causes the flashes)
– IronGeek
Nov 15 '18 at 4:12
|
show 17 more comments
2
Do you mean the part where devtools shows that something is changing in the dom? That's what you want to hide?
– Jabberwocky
Nov 12 '18 at 17:25
3
Why do you care about DevTools and it flashing its DOM changes?
– Matthias Dailey
Nov 12 '18 at 17:25
1
I think your question is still confusing. What exactly is the problem? What's not performing how you would expect? How do you expect it to perform?
– Nathan
Nov 14 '18 at 17:51
2
I'd love to help but I dont understand what you are trying to solve.
– Swazimodo
Nov 14 '18 at 18:06
2
Put aconsole.log(contentTop, contentBottom)just beforeif (centerbandBottom > contentTop && centerbandTop < contentBottom)and you'll notice that when you use$content.hide()the value ofcontentTopandcontentBottomare relatively fixed (never changes). So they either stay hidden or toggled forever between hidden and shown (which causes the flashes)
– IronGeek
Nov 15 '18 at 4:12
2
2
Do you mean the part where devtools shows that something is changing in the dom? That's what you want to hide?
– Jabberwocky
Nov 12 '18 at 17:25
Do you mean the part where devtools shows that something is changing in the dom? That's what you want to hide?
– Jabberwocky
Nov 12 '18 at 17:25
3
3
Why do you care about DevTools and it flashing its DOM changes?
– Matthias Dailey
Nov 12 '18 at 17:25
Why do you care about DevTools and it flashing its DOM changes?
– Matthias Dailey
Nov 12 '18 at 17:25
1
1
I think your question is still confusing. What exactly is the problem? What's not performing how you would expect? How do you expect it to perform?
– Nathan
Nov 14 '18 at 17:51
I think your question is still confusing. What exactly is the problem? What's not performing how you would expect? How do you expect it to perform?
– Nathan
Nov 14 '18 at 17:51
2
2
I'd love to help but I dont understand what you are trying to solve.
– Swazimodo
Nov 14 '18 at 18:06
I'd love to help but I dont understand what you are trying to solve.
– Swazimodo
Nov 14 '18 at 18:06
2
2
Put a
console.log(contentTop, contentBottom) just before if (centerbandBottom > contentTop && centerbandTop < contentBottom) and you'll notice that when you use $content.hide() the value of contentTop and contentBottom are relatively fixed (never changes). So they either stay hidden or toggled forever between hidden and shown (which causes the flashes)– IronGeek
Nov 15 '18 at 4:12
Put a
console.log(contentTop, contentBottom) just before if (centerbandBottom > contentTop && centerbandTop < contentBottom) and you'll notice that when you use $content.hide() the value of contentTop and contentBottom are relatively fixed (never changes). So they either stay hidden or toggled forever between hidden and shown (which causes the flashes)– IronGeek
Nov 15 '18 at 4:12
|
show 17 more comments
3 Answers
3
active
oldest
votes
3
+50
It is hard to understand your question, but from the code snippets you provided it looks like you need to fundamentally rethink your approach.
Your code moves the "container" div up and then computes the positions of the contained elements, but the problem is that when you hide or show an element all the other elements move in response. So when "contents 1" gets above the center band and you hide it, it stops taking up space and "contents 2" moves to where "contents 1" was. However, since "contents 1" was above the center band, now "contents 2" is above the center band and you are going to hide that, too. And so in your code, as soon as "contents 1" gets above the center band, all the contents will be hidden.
There are many ways to handle this, and the best way for your situation will probably depend on details of what you are truly trying to accomplish and which are not clear from your question. Using CSS overflow: hidden is probably the most efficient and you do not really explain what is wrong with that solution.
Another option is to adjust the position of the container to compensate for hiding the element. You also have to have some way to figure out when to show items that enter the box, which you cannot do from their position, because they are hidden. This snippet is not ideal, and there are some glitches because of margins, but it shows the concept.
$(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>answered Nov 21 '18 at 3:27
Old Pro
14.1k23665
add a comment |
1
Initially calculate the vertical beginning/ending values of all divs and store this data independently. Make all divs visible (display !== 'none')in the DOM very briefly, while using opacity to hide them, in order to calculate their heights (no way to calculate div height without attaching it to the DOM).
Also need to make all scrollable items position: absolute so that their removal doesn't reflow the items beneath them. This means javascript also needs to calculate top positions for items.
Then, whenever things change (whenever new items potentially need to be shown/hidden) check all independently stored position data against the position of the "hot zone" (the zone with which contact causes visibility).
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>answered Nov 21 '18 at 4:03
Gershom Maes
1,7681326
add a comment |
0
So you said in your comment that
but my requirement is whichever content touches that gray band should
be shown otherwise it has to be hidden holding no width and height
From this I understand that you need a vertical text scroller. Why don't you use the gray band div as a container, with overflow hidden, and then scroll the content through it?
$(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>answered Nov 17 '18 at 20:23
Dan D.
574213
this is not my requirement , my requirement is whichever contents touches that band it has to be shown other has to be hidden(occupying no width and height)
– skBangalore
Nov 18 '18 at 2:21
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53267010%2fhow-to-hide-single-div-at-a-time-without-flashing-rather-setting-visibility-hidd%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
+50
It is hard to understand your question, but from the code snippets you provided it looks like you need to fundamentally rethink your approach.
Your code moves the "container" div up and then computes the positions of the contained elements, but the problem is that when you hide or show an element all the other elements move in response. So when "contents 1" gets above the center band and you hide it, it stops taking up space and "contents 2" moves to where "contents 1" was. However, since "contents 1" was above the center band, now "contents 2" is above the center band and you are going to hide that, too. And so in your code, as soon as "contents 1" gets above the center band, all the contents will be hidden.
There are many ways to handle this, and the best way for your situation will probably depend on details of what you are truly trying to accomplish and which are not clear from your question. Using CSS overflow: hidden is probably the most efficient and you do not really explain what is wrong with that solution.
Another option is to adjust the position of the container to compensate for hiding the element. You also have to have some way to figure out when to show items that enter the box, which you cannot do from their position, because they are hidden. This snippet is not ideal, and there are some glitches because of margins, but it shows the concept.
$(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>answered Nov 21 '18 at 3:27
Old Pro
14.1k23665
add a comment |
3
+50
It is hard to understand your question, but from the code snippets you provided it looks like you need to fundamentally rethink your approach.
Your code moves the "container" div up and then computes the positions of the contained elements, but the problem is that when you hide or show an element all the other elements move in response. So when "contents 1" gets above the center band and you hide it, it stops taking up space and "contents 2" moves to where "contents 1" was. However, since "contents 1" was above the center band, now "contents 2" is above the center band and you are going to hide that, too. And so in your code, as soon as "contents 1" gets above the center band, all the contents will be hidden.
There are many ways to handle this, and the best way for your situation will probably depend on details of what you are truly trying to accomplish and which are not clear from your question. Using CSS overflow: hidden is probably the most efficient and you do not really explain what is wrong with that solution.
Another option is to adjust the position of the container to compensate for hiding the element. You also have to have some way to figure out when to show items that enter the box, which you cannot do from their position, because they are hidden. This snippet is not ideal, and there are some glitches because of margins, but it shows the concept.
$(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>answered Nov 21 '18 at 3:27
Old Pro
14.1k23665
add a comment |
3
+50
3
+50
3
+50
It is hard to understand your question, but from the code snippets you provided it looks like you need to fundamentally rethink your approach.
Your code moves the "container" div up and then computes the positions of the contained elements, but the problem is that when you hide or show an element all the other elements move in response. So when "contents 1" gets above the center band and you hide it, it stops taking up space and "contents 2" moves to where "contents 1" was. However, since "contents 1" was above the center band, now "contents 2" is above the center band and you are going to hide that, too. And so in your code, as soon as "contents 1" gets above the center band, all the contents will be hidden.
There are many ways to handle this, and the best way for your situation will probably depend on details of what you are truly trying to accomplish and which are not clear from your question. Using CSS overflow: hidden is probably the most efficient and you do not really explain what is wrong with that solution.
Another option is to adjust the position of the container to compensate for hiding the element. You also have to have some way to figure out when to show items that enter the box, which you cannot do from their position, because they are hidden. This snippet is not ideal, and there are some glitches because of margins, but it shows the concept.
$(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>answered Nov 21 '18 at 3:27
Old Pro
14.1k23665
It is hard to understand your question, but from the code snippets you provided it looks like you need to fundamentally rethink your approach.
Your code moves the "container" div up and then computes the positions of the contained elements, but the problem is that when you hide or show an element all the other elements move in response. So when "contents 1" gets above the center band and you hide it, it stops taking up space and "contents 2" moves to where "contents 1" was. However, since "contents 1" was above the center band, now "contents 2" is above the center band and you are going to hide that, too. And so in your code, as soon as "contents 1" gets above the center band, all the contents will be hidden.
There are many ways to handle this, and the best way for your situation will probably depend on details of what you are truly trying to accomplish and which are not clear from your question. Using CSS overflow: hidden is probably the most efficient and you do not really explain what is wrong with that solution.
Another option is to adjust the position of the container to compensate for hiding the element. You also have to have some way to figure out when to show items that enter the box, which you cannot do from their position, because they are hidden. This snippet is not ideal, and there are some glitches because of margins, but it shows the concept.
$(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>$(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>$(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>answered Nov 21 '18 at 3:27
Old Pro
14.1k23665
answered Nov 21 '18 at 3:27
Old Pro
14.1k23665
answered Nov 21 '18 at 3:27
Old Pro
14.1k23665
answered Nov 21 '18 at 3:27
Old Pro
14.1k23665
14.1k23665
add a comment |
add a comment |
1
Initially calculate the vertical beginning/ending values of all divs and store this data independently. Make all divs visible (display !== 'none')in the DOM very briefly, while using opacity to hide them, in order to calculate their heights (no way to calculate div height without attaching it to the DOM).
Also need to make all scrollable items position: absolute so that their removal doesn't reflow the items beneath them. This means javascript also needs to calculate top positions for items.
Then, whenever things change (whenever new items potentially need to be shown/hidden) check all independently stored position data against the position of the "hot zone" (the zone with which contact causes visibility).
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>answered Nov 21 '18 at 4:03
Gershom Maes
1,7681326
add a comment |
1
Initially calculate the vertical beginning/ending values of all divs and store this data independently. Make all divs visible (display !== 'none')in the DOM very briefly, while using opacity to hide them, in order to calculate their heights (no way to calculate div height without attaching it to the DOM).
Also need to make all scrollable items position: absolute so that their removal doesn't reflow the items beneath them. This means javascript also needs to calculate top positions for items.
Then, whenever things change (whenever new items potentially need to be shown/hidden) check all independently stored position data against the position of the "hot zone" (the zone with which contact causes visibility).
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>answered Nov 21 '18 at 4:03
Gershom Maes
1,7681326
add a comment |
1
1
1
Initially calculate the vertical beginning/ending values of all divs and store this data independently. Make all divs visible (display !== 'none')in the DOM very briefly, while using opacity to hide them, in order to calculate their heights (no way to calculate div height without attaching it to the DOM).
Also need to make all scrollable items position: absolute so that their removal doesn't reflow the items beneath them. This means javascript also needs to calculate top positions for items.
Then, whenever things change (whenever new items potentially need to be shown/hidden) check all independently stored position data against the position of the "hot zone" (the zone with which contact causes visibility).
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>answered Nov 21 '18 at 4:03
Gershom Maes
1,7681326
Initially calculate the vertical beginning/ending values of all divs and store this data independently. Make all divs visible (display !== 'none')in the DOM very briefly, while using opacity to hide them, in order to calculate their heights (no way to calculate div height without attaching it to the DOM).
Also need to make all scrollable items position: absolute so that their removal doesn't reflow the items beneath them. This means javascript also needs to calculate top positions for items.
Then, whenever things change (whenever new items potentially need to be shown/hidden) check all independently stored position data against the position of the "hot zone" (the zone with which contact causes visibility).
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>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>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>answered Nov 21 '18 at 4:03
Gershom Maes
1,7681326
edited Nov 21 '18 at 4:23
answered Nov 21 '18 at 4:03
Gershom Maes
1,7681326
answered Nov 21 '18 at 4:03
Gershom Maes
1,7681326
answered Nov 21 '18 at 4:03
Gershom Maes
1,7681326
1,7681326
add a comment |
add a comment |
0
So you said in your comment that
but my requirement is whichever content touches that gray band should
be shown otherwise it has to be hidden holding no width and height
From this I understand that you need a vertical text scroller. Why don't you use the gray band div as a container, with overflow hidden, and then scroll the content through it?
$(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>answered Nov 17 '18 at 20:23
Dan D.
574213
this is not my requirement , my requirement is whichever contents touches that band it has to be shown other has to be hidden(occupying no width and height)
– skBangalore
Nov 18 '18 at 2:21
add a comment |
0
So you said in your comment that
but my requirement is whichever content touches that gray band should
be shown otherwise it has to be hidden holding no width and height
From this I understand that you need a vertical text scroller. Why don't you use the gray band div as a container, with overflow hidden, and then scroll the content through it?
$(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>answered Nov 17 '18 at 20:23
Dan D.
574213
this is not my requirement , my requirement is whichever contents touches that band it has to be shown other has to be hidden(occupying no width and height)
– skBangalore
Nov 18 '18 at 2:21
add a comment |
0
0
0
So you said in your comment that
but my requirement is whichever content touches that gray band should
be shown otherwise it has to be hidden holding no width and height
From this I understand that you need a vertical text scroller. Why don't you use the gray band div as a container, with overflow hidden, and then scroll the content through it?
$(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>answered Nov 17 '18 at 20:23
Dan D.
574213
So you said in your comment that
but my requirement is whichever content touches that gray band should
be shown otherwise it has to be hidden holding no width and height
From this I understand that you need a vertical text scroller. Why don't you use the gray band div as a container, with overflow hidden, and then scroll the content through it?
$(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> $(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> $(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>answered Nov 17 '18 at 20:23
Dan D.
574213
answered Nov 17 '18 at 20:23
Dan D.
574213
answered Nov 17 '18 at 20:23
Dan D.
574213
answered Nov 17 '18 at 20:23
Dan D.
574213
574213
this is not my requirement , my requirement is whichever contents touches that band it has to be shown other has to be hidden(occupying no width and height)
– skBangalore
Nov 18 '18 at 2:21
add a comment |
this is not my requirement , my requirement is whichever contents touches that band it has to be shown other has to be hidden(occupying no width and height)
– skBangalore
Nov 18 '18 at 2:21
this is not my requirement , my requirement is whichever contents touches that band it has to be shown other has to be hidden(occupying no width and height)
– skBangalore
Nov 18 '18 at 2:21
this is not my requirement , my requirement is whichever contents touches that band it has to be shown other has to be hidden(occupying no width and height)
– skBangalore
Nov 18 '18 at 2:21
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53267010%2fhow-to-hide-single-div-at-a-time-without-flashing-rather-setting-visibility-hidd%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Do you mean the part where devtools shows that something is changing in the dom? That's what you want to hide?
– Jabberwocky
Nov 12 '18 at 17:25
3
Why do you care about DevTools and it flashing its DOM changes?
– Matthias Dailey
Nov 12 '18 at 17:25
1
I think your question is still confusing. What exactly is the problem? What's not performing how you would expect? How do you expect it to perform?
– Nathan
Nov 14 '18 at 17:51
2
I'd love to help but I dont understand what you are trying to solve.
– Swazimodo
Nov 14 '18 at 18:06
2
Put a
console.log(contentTop, contentBottom)just beforeif (centerbandBottom > contentTop && centerbandTop < contentBottom)and you'll notice that when you use$content.hide()the value ofcontentTopandcontentBottomare relatively fixed (never changes). So they either stay hidden or toggled forever between hidden and shown (which causes the flashes)– IronGeek
Nov 15 '18 at 4:12