0

我已经尝试了几乎所有在线可用的解决方案，但没有任何解决方案，以下是我尝试过的几个解决方案

我的实际场景是当屏幕向下滚动时另一个 div 元素从屏幕上消失时显示特定的 div 元素。

我可以在台式机/笔记本电脑上执行此操作，但不能在滚动事件根本不触发的手机上执行此操作。

我正在使用的台式机/笔记本电脑滚动事件侦听器是

@HostListener('window:scroll', ['$event']) getScrollHeight(event) {
  console.log('from desk' , window.pageYOffset, event);
}

而对于移动设备，因为我的滚动事件没有触发，所以我在下面使用

@HostListener('window:touchStart', ['$event']) checkTouchEnd(event) {
this.start = event.changedTouches[0];
});

@HostListener('window:touchend', ['$event']) checkTouchEnd(event) {
 this.end = event.changedTouches[0];
 let scrollpositionValue;
 if((this.end.screenY - this.start.screenY) > 0) {
   console.log('scrolling up');
   console.log('[scroll-up]', this.end.screenY - this.start.screenY);
   scrollpositionValue = this.end.screenY - this.start.screenY;
  } else if(this.end.screenY - this.start.screenY < 0) {
   console.log('scrolling down');
   console.log('[scroll-down]', this.end.screenY - this.start.screenY);
   scrollpositionValue = this.end.screenY - this.start.screenY;
  }
 const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
 console.log('[scroll]', scrollPosition);    
});

有人可以帮我解决一个问题，我想要的只是让移动浏览器上的 scrollY 位置滚动。

提前致谢！

4

1 回答 1

1

我的实际场景是当屏幕向下滚动时另一个 div 元素从屏幕上消失时显示特定的 div 元素。

不要为此使用滚动事件侦听器，请为此使用Intersection Observer (IO)。

这是为此类问题设计的。使用 IO，您可以在 HTML 元素与另一个元素（或视口）相交时做出反应

检查此页面，它向您展示了如何在元素进入视口后为其设置动画（一直向下滚动）

简要回顾一下您必须做的事情：

首先你必须创建一个新的观察者：

var options = {
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

在这里，我们定义一旦您的目标元素在视口中 100% 可见（阈值为 1），您的回调函数就会被执行。在这里你可以定义另一个百​​分比，0.5 意味着一旦你的元素有 50% 可见，函数就会被执行。

然后您必须定义要观看的元素

var target = document.querySelector('.div-to-watch');
observer.observe(target);

最后，您需要通过定义回调函数来指定元素在视口中可见后应该发生的情况：

var callback = function(entries, observer) { 
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // here you animate another element and do whatever you like
  });
};

如果您需要支持旧版浏览器，请使用w3c 的官方 polyfill。

如果您不想在元素再次滚动到视图中时再次触发动画，那么您也可以在动画后不观察元素。

于 2020-03-12T08:05:00.960 回答