CODEWITHSUNDEEP
javascriptintersection-observer
Goowik
Goowik

Reputation: 803

intersectionObserver get ratio 1 if fully in view (larger than viewport)

I have a single page divided in multiple sections. Now on scroll I'm trying to show the progress (how much a section is in view), using the width of the bottom-border of the navigation items. Underneath you'll find an example of how I implemented it.

Now as you can see, if a section is higher than the viewport, the intersectionRatio will never reach 1 (which in turn wouldn't draw a full width border). Are there any options or alternatives I can use, to actually achieve the full width?

(function() {
    var sections = [],
        links = {},
        thresholdSet = [[]],
        observerOptions = {
            root: null,
            rootMargin: "0px",
            threshold: _buildThresholdList()
        };

    function _init() {
        if (!'IntersectionObserver' in window) {
            return;
        }

        sections = document.getElementsByClassName('section');

        for(var i = 0; i < sections.length; i++) {
            var observer = new IntersectionObserver(_intersectionCallback, observerOptions),
                section = sections[i],
                link = document.getElementById('js-' + section.id);

            links[section.id] = {
                node: link,
                initialWidth: link.offsetWidth
            };

            observer.observe(section);
        }
    }

    function _buildThresholdList() {
        for(var i = 0; i <= 1.0; i += 0.01) {
            thresholdSet[0].push(i.toFixed(2));
        }

        console.table(thresholdSet[0]);
        return thresholdSet[0];
    }

    function _intersectionCallback(entries) {
        entries.forEach(function(entry) {
            var section = entry.target;
            var link = links[section.id];
            var width = link.initialWidth * (entry.intersectionRatio || 0) + "px";

            link.node.style.width = width;

            console.log(section.id, entry.intersectionRatio);
        });
    }
    
    _init();
}());
body {
  display: flex;
}

.aside {
  flex: 0 0 150px;
}

.nav {
  position: sticky;
  top: 0;
}

.nav li {
  margin-bottom: 20px;
}

.nav li span {
 display: inline-block;
 padding-bottom: 10px;
 border-bottom: 2px solid red;
}

.sections {
  flex: 1;
}

#page1 {
  height: 350px;
  background-color: #cc8136;
}

#page2 {
  height: 1500px;
  background-color: #6538c4;
}

#page3 {
  height: 1300px;
  background-color: #9e7f9b;
}

#page4 {
  height: 300px;
  background-color: #568574;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="aside">
      <ul class="nav">
        <li><span id="js-page1">page1</span></li>
        <li><span id="js-page2">page2</span></li>
        <li><span id="js-page3">page3</span></li>
        <li><span id="js-page4">page4</span></li>
      </ul>
    </div>
    <div class="sections">
      <div class="section" id="page1"></div>
      <div class="section" id="page2"></div>
      <div class="section" id="page3"></div>
      <div class="section" id="page4"></div>
    </div>
</body>
</html>

Upvotes: 6

Views: 3842

Answers (1)

Goowik
Goowik

Reputation: 803

K so instead of using the entry.intersectionRatio, I'm using entry.intersectionRect.height / viewportHeight.

Upvotes: 3

Related Questions