Div that scrolls only when children can be displayed without overflowing

Question

Div that scrolls only when children can be displayed without overflowing

I am seeking a solution to ensure that the children inside my scrollable div are only visible in their entirety.

HTML

 <div id="container">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
 </div>

CSS

 #container {
      display:block;
      overflow-y: scroll;
      overflow-x: hidden;
      height: 250px;
      width: 150px;
 }
 .child {
      background-color: red;
      height: 100px;
      width: 100px;
      margin: 5px;
 }

In this scenario, only two and a half red boxes will initially appear on the screen (the third box extends beyond the viewable area). I aim for the third (and subsequent) boxes to be shown only when they can be fully displayed by scrolling.

html css

Answer 1

Answer №1

If you want to control the opacity of an inner element based on its position, you can use JavaScript to check the bounding rectangle. If the element is inside, you can set its opacity to 1.

var children = document.getElementsByClassName("child");
var container = document.getElementById("container");

for(var i = 0; i < children.length; i++) {
    children[i].classList.add('donotshow');
    if(children[i].getBoundingClientRect().top > container.getBoundingClientRect().top && (children[i].getBoundingClientRect().top + children[i].getBoundingClientRect().height < container.getBoundingClientRect().top + container.getBoundingClientRect().height)) {
        children[i].classList.remove('donotshow');
    }
}

container.addEventListener("scroll", function() {
    console.log("hi");
    for(var i = 0; i < children.length; i++) {
        children[i].classList.add('donotshow');
        if(children[i].getBoundingClientRect().top > container.getBoundingClientRect().top && (children[i].getBoundingClientRect().top + children[i].getBoundingClientRect().height < container.getBoundingClientRect().top + container.getBoundingClientRect().height)) {
            children[i].classList.remove('donotshow');
        }
    }
})

Check out this JSFiddle for a working example!

I hope this solution helps you with your project.

--Best regards

Answer 2

If you want to control the opacity of an inner element based on its position, you can use JavaScript to check the bounding rectangle. If the element is inside, you can set its opacity to 1.

var children = document.getElementsByClassName("child");
var container = document.getElementById("container");

for(var i = 0; i < children.length; i++) {
    children[i].classList.add('donotshow');
    if(children[i].getBoundingClientRect().top > container.getBoundingClientRect().top && (children[i].getBoundingClientRect().top + children[i].getBoundingClientRect().height < container.getBoundingClientRect().top + container.getBoundingClientRect().height)) {
        children[i].classList.remove('donotshow');
    }
}

container.addEventListener("scroll", function() {
    console.log("hi");
    for(var i = 0; i < children.length; i++) {
        children[i].classList.add('donotshow');
        if(children[i].getBoundingClientRect().top > container.getBoundingClientRect().top && (children[i].getBoundingClientRect().top + children[i].getBoundingClientRect().height < container.getBoundingClientRect().top + container.getBoundingClientRect().height)) {
            children[i].classList.remove('donotshow');
        }
    }
})

Check out this JSFiddle for a working example!

I hope this solution helps you with your project.

--Best regards

Answer 3

Answer №2

You have the option of utilizing the Intersection Observer API along with a polyfill for it

Check out this basic working demonstration:

let children = Array.from(document.querySelectorAll('.child'));

let options = {
    root: document.querySelector('#container'),
    rootMargin: '0px',
    threshold: 1.0
}

let callback = function(entries, observer) { 
        entries.forEach(entry => {
        entry.target.style.visibility = (entry.intersectionRatio == 1) ?
'visible' : 'hidden'            // the Element whose intersection with the intersection root changed.
    });
};

let observer = new IntersectionObserver(callback, options);

children.forEach(child => observer.observe(child));

 #container {
      display:block;
      overflow-y: scroll;
      overflow-x: hidden;
      height: 250px;
      width: 150px;
 }
 .child {
      background-color: red;
      height: 100px;
      width: 100px;
      margin: 5px;
 }

 <div id="container">
      <div class="child" id="child1"></div>
      <div class="child" id="child2"></div>
      <div class="child" id="child3"></div>
      <div class="child" id="child4"></div>
      <div class="child" id="child5"></div>
      <div class="child" id="child6"></div>
 </div>

Answer 4

You have the option of utilizing the Intersection Observer API along with a polyfill for it

Check out this basic working demonstration:

let children = Array.from(document.querySelectorAll('.child'));

let options = {
    root: document.querySelector('#container'),
    rootMargin: '0px',
    threshold: 1.0
}

let callback = function(entries, observer) { 
        entries.forEach(entry => {
        entry.target.style.visibility = (entry.intersectionRatio == 1) ?
'visible' : 'hidden'            // the Element whose intersection with the intersection root changed.
    });
};

let observer = new IntersectionObserver(callback, options);

children.forEach(child => observer.observe(child));

 #container {
      display:block;
      overflow-y: scroll;
      overflow-x: hidden;
      height: 250px;
      width: 150px;
 }
 .child {
      background-color: red;
      height: 100px;
      width: 100px;
      margin: 5px;
 }

 <div id="container">
      <div class="child" id="child1"></div>
      <div class="child" id="child2"></div>
      <div class="child" id="child3"></div>
      <div class="child" id="child4"></div>
      <div class="child" id="child5"></div>
      <div class="child" id="child6"></div>
 </div>

Div that scrolls only when children can be displayed without overflowing

Answer №1

Answer №2

Similar questions

Utilizing the Strength of Code Snippets and the Art of Style Sheet Separation

What could be causing my Angular.js application to malfunction on IE7?

Is there a way to generate a distinctive curved design using CSS for a

Implementing a Popover Notification When Clicked

Is it possible to cache an html page and display it on the current page when reloading?

Localhost Delay in XAMPP

Reorganize div elements responsively using Bootstrap 5.0

Ways to dynamically update a div with data from a JSON response

The cloned rows created with jQuery are failing to submit via the post method

What is the proper way to retrieve this stylesheet and add it to the header of my HTML file?

Looking to tally up the variety of items in Django?

Conceal optional navigation bar options once a user has logged in - utilizing Angular 8

Ways to align elements vertically in a container without using flexbox?

Responsive HTML table with full width of 100%

Identifying the Operating System and Applying the Appropriate Stylesheet

Is there a way to refresh my order hook in React JS?

Retrieve the checkbox value and assign it to an object in the $scope of an Angular

CSRF token not recognized. Request cancelled. Even after including the CSRF token {% csrf_token %}, the error persists

unable to submit Angular form via post method

Center elements at % on the webpage using CSS styling