使用 jQuery 和 CSS3 的 TranslateX() 在将父元素滚动到视图中时显示元素

Question

当它的父部分滚动到视图中时，我想更改它的位置。在父视图中向下滚动时，它应该向右移动，向上滚动时，它应该移回原来的位置。（向左 -200px）它应该只在用户主动滚动时移动。如果用户一直向下滚动到圆圈父部分的最底部，或者如果他们已经向下滚动到底部并重新加载页面，则圆圈应该出现在完全显示的位置。我当前的代码部分有效，但是我无法根据父元素的可见程度来显示整个元素，并且在滚动到最底部后重新加载页面时也无法显示它的最终位置.JSFiddle：https ://jsfiddle.net/thebluehorse/gu2rvnsw/var $window = $(window),    $sectionFour = $('.section-four'),    $circle = $sectionFour.find('.circle'),    lastScrollTop = 0,    position = -200;function revealCircle() {  var isVisible,    st = $window.scrollTop();  isVisible = isInView($sectionFour);  if (isVisible) {    // console.log('section four is in view, so lets do stuff!');    if (st > lastScrollTop) {      if (position === 0) {        return false      }      $circle.css('transform', 'translateX(' + position + 'px')      position++;    } else {      if (position === -200) {        return false      }      $circle.css('transform', 'translateX(' + position + 'px')      position--;    }  }}function isInView(node) {  var rect;  if (typeof jQuery === 'function' && node instanceof jQuery) {    node = node[0];  }  rect = node.getBoundingClientRect();  return (    (rect.height > 0 || rect.width > 0) &&    rect.bottom >= 0 &&    rect.right >= 0 &&    rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&    rect.left <= (window.innerWidth || document.documentElement.clientWidth)  );}$window.on('scroll', revealCircle);.circle {  width: 400px;  height: 400px;  background: #fff;  -webkit-border-radius: 200px;  -moz-border-radius: 200px;  border-radius: 200px;  transform: translateX(-200px); }.section {  min-height: 400px; }  .section-one {    background-color: red; }  .section-two {    background-color: orange; }  .section-three {    background-color: yellow; }  .section-four {    background-color: green; }

Answer 1

您应该看看Intersection Observer (IO)，它旨在解决像您这样的问题。侦听滚动事件并计算位置可能会导致性能不佳。

首先，您必须定义 IO 的选项：

let options = {

  root: document.querySelectorAll('.section-four'),

  rootMargin: '0px',

  threshold: 1.0

}

let observer = new IntersectionObserver(callback, options);

定义选项后，您必须告诉观察者要观察哪些元素，我想在您的情况下这将是.section-four：

let targets = document.querySelectorAll('.section-four');

targets.forEach(target => {

  observer.observe(target) } 

)

最后一步是定义一旦.section-four进入视图就应该执行的回调函数：

let callback = (entries, observer) => { 

  entries.forEach(entry => {

    // Each entry describes an intersection change for one observed

    // target element

    // here you can do something like $(entry.target).find('circle') to get your circle

  });

};

看看这个演示，根据元素可见的程度，背景颜色会发生变化。我认为这与您的问题很接近，您只是不更改为元素内的圆圈设置动画的 bg 颜色。

站点上还有另一个演示，显示屏幕上可见元素的数量，也许这更适合您。

您还可以使用w3c 的这个polyfill来支持旧浏览器。