flex 容器无法检测到窗口 scrollTop 偏移量

Question

我需要获取window.pageYOffset || document.documentElement.scrollTop; 值。 确定
1) 如果用户滚动了标题
2）和方向st < delta && lastScrollTop !== 0

$(window).on('scroll', fn) 没有用，所以我使用了$('main').on('scroll', fn)。那是因为我在使用

body {
  display: flex;
  flex-direction: column;
}

但现在我无法拉开滚动距离。有任何想法吗？ codepen波纹管

var lastScrollTop = 0;
var delta = 5;


$(window).on('scroll', () => {
     var st = window.pageYOffset || document.documentElement.scrollTop;
     console.log('not triggering', st);
});

$('main').on('scroll', () => {
    var st = window.pageYOffset || document.documentElement.scrollTop;
    console.log('is triggering', st);
});

我正在使用这个解决方案 - https://codepen.io/elna-legzdia/pen/YgYqoW

Answer 1

我个人认为更改body元素的显示类型是一个糟糕的选择。它是根容器，谁知道每个浏览器如何指定它的显示。恕我直言，最好创建自己的根元素并从那里开始。

CodePen Example

var $main = $('main');
$main.on('scroll', () => {
  var pos = $main.scrollTop();
  var isTop = pos == 0;
  $main.toggleClass('top', isTop);
  var isBottom = pos + $main.innerHeight() >= $main.prop('scrollHeight');
  $main.toggleClass('bottom', isBottom);
  console.log('is triggering', pos);
});

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

#root {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.sticky-header, .sticky-footer {
  flex: 0 0 auto;
  background: purple;
}

.sticky-content {
  flex: 1 1 auto;
  overflow-y: scroll;
  background-color: green;
}
.top {
  background-color: yellow;
}
.bottom {
  background-color: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="root">
    <header class="sticky-header">
      <h1>I'm Sticky</h1>
    </header>

    <main class="sticky-content top">
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
      <p>This is a large amount of scrollable content.</p>
    </main>

    <footer class="sticky-footer">
      <small>I'm sticky</small>
    </footer>
  </div>

Answer 2

您在 body 元素上使用了 dispay: flex。这不是一个好主意，请改用 div 。只需在 body 上移除 flex（其他元素都很好），你就可以让它工作了！

显示：弹性； 弹性方向：列；