如何解决CSS滚动对齐冲突？

Question

我目前正在使用一个库测试CSS滚动捕捉功能，该库可以让我们知道元素是否在视口中，但是我遇到了一个问题：该库不起作用，我也不知道如何修复它。

我试图删除行overflow-y: scroll;，库开始工作并将元素信息记录到控制台中，但是当然CSS滚动捕捉功能停止工作。

这是我的代码：

//Function to check if element is in view
(function($) {

  /**
   * Copyright 2012, Digital Fusion
   * Licensed under the MIT license.
   * http://teamdf.com/jquery-plugins/license/
   *
   * @author Sam Sehnert
   * @desc A small plugin that checks whether elements are within
   *       the user visible viewport of a web browser.
   *       can accounts for vertical position, horizontal, or both
   */
  var $w = $(window);
  $.fn.visible = function(partial, hidden, direction, container) {

    if (this.length < 1)
      return;

    // Set direction default to 'both'.
    direction = direction || 'both';

    var $t = this.length > 1 ? this.eq(0) : this,
      isContained = typeof container !== 'undefined' && container !== null,
      $c = isContained ? $(container) : $w,
      wPosition = isContained ? $c.position() : 0,
      t = $t.get(0),
      vpWidth = $c.outerWidth(),
      vpHeight = $c.outerHeight(),
      clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;

    if (typeof t.getBoundingClientRect === 'function') {

      // Use this native browser method, if available.
      var rec = t.getBoundingClientRect(),
        tViz = isContained ?
        rec.top - wPosition.top >= 0 && rec.top < vpHeight + wPosition.top :
        rec.top >= 0 && rec.top < vpHeight,
        bViz = isContained ?
        rec.bottom - wPosition.top > 0 && rec.bottom <= vpHeight + wPosition.top :
        rec.bottom > 0 && rec.bottom <= vpHeight,
        lViz = isContained ?
        rec.left - wPosition.left >= 0 && rec.left < vpWidth + wPosition.left :
        rec.left >= 0 && rec.left < vpWidth,
        rViz = isContained ?
        rec.right - wPosition.left > 0 && rec.right < vpWidth + wPosition.left :
        rec.right > 0 && rec.right <= vpWidth,
        vVisible = partial ? tViz || bViz : tViz && bViz,
        hVisible = partial ? lViz || rViz : lViz && rViz,
        vVisible = (rec.top < 0 && rec.bottom > vpHeight) ? true : vVisible,
        hVisible = (rec.left < 0 && rec.right > vpWidth) ? true : hVisible;

      if (direction === 'both')
        return clientSize && vVisible && hVisible;
      else if (direction === 'vertical')
        return clientSize && vVisible;
      else if (direction === 'horizontal')
        return clientSize && hVisible;
    } else {

      var viewTop = isContained ? 0 : wPosition,
        viewBottom = viewTop + vpHeight,
        viewLeft = $c.scrollLeft(),
        viewRight = viewLeft + vpWidth,
        position = $t.position(),
        _top = position.top,
        _bottom = _top + $t.height(),
        _left = position.left,
        _right = _left + $t.width(),
        compareTop = partial === true ? _bottom : _top,
        compareBottom = partial === true ? _top : _bottom,
        compareLeft = partial === true ? _right : _left,
        compareRight = partial === true ? _left : _right;

      if (direction === 'both')
        return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
      else if (direction === 'vertical')
        return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
      else if (direction === 'horizontal')
        return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
    }
  };

})(jQuery);
//Function to check if element is in view

#sec1 {
  background-color: orange;
  height: 100vh;
}

#sec2 {
  background-color: yellow;
  height: 100vh;
}

#sec3 {
  background-color: green;
  height: 100vh;
}

#sec4 {
  background-color: blue;
  height: 100vh;
}

body {
  overflow-x: hidden;
  height: 100%;
}


/* scroll snap css */

.scroll-snap {
  overflow-y: scroll;
  /* if i comment this line
                         scroll snap will stop
                         working but the javascript
                         function to check element's
                         visibility will start working */
  height: 100vh;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
}

.scroll-snap>section {
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
}


/* scroll snap css */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <title>Test</title>
</head>

<body>
  <div class="scroll-snap">
    <section id='sec1'></section>
    <section id='sec2'></section>
    <section id='sec3'>
      <div class="track">
        <h1>Section3</h1>
      </div>
    </section>
    <section id='sec4'></section>
  </div>
  <script>
    //if page is scrolled it will log into console
    $(window).scroll(function(event) {
      $(function() {
        if ($('.track').visible()) {
          console.log('Section3 is visible');
        }
      });
    });
  </script>
</body>

</html>

   

https://jsfiddle.net/Benasin/w47vutxd/28/

我希望他们两个都能工作，但没有。