0

I using @Inject(DOCUMENT) to build scrollTop can be work on PC chrome, but not work in iphone.

for exapmle:

structure:

<app-header></app-header> <app-body></app-body>

app-header component:

import { DOCUMENT } from '@angular/common';
import { Component, OnInit, HostListener, Inject } from '@angular/core';

constructor(@Inject(DOCUMENT) private document: Document) { }

@HostListener('window:scroll', [])onWindowScroll() {
    console.log(this.document.documentElement.scrollTop);
  }

Sliding up and down, the this.document.documentElement.scrollTop value always 0 in iphone 6S. but work in PC chrome browser.

Finn
  • 1,323
  • 5
  • 24
  • 46
  • 1
    Have you seen this thread? https://stackoverflow.com/questions/2863547/javascript-scroll-event-for-iphone-ipad is this what you're running into, possibly? – Joshua Terrill Dec 10 '18 at 09:28
  • Thank you, maybe this is the problem,the strange thing, I try to that `$(window).scrollTop()` is working, but it has not been recommended to use jquery in angular? – Finn Dec 10 '18 at 09:40
  • 1
    Yeah... that's typically not recommended, that's true. I might be incorrect, but do you need to even do the DOCUMENT injection stuff still? I thought you could access `window.onscroll` event straight from an angular component now. And subsequently, maybe you can call `window.scrollTo(0,0)` to scroll to the top. None of that requiring jQuery. – Joshua Terrill Dec 10 '18 at 09:44
  • ok, thank. I hope that after the angular will improve this part, compared to jquery, angular scroll related functions are not convenient to use. – Finn Dec 10 '18 at 09:57
  • jQuery methods are just wrappers around things that already exist in some way in javascript. Did the two items I mentioned above, the `window.onscroll` event hook and the `window.scrollTo(0,0)` work for you in your angular component? If you put something like `window.onscroll = (event) => { console.log('scrolling', event) }` in your `ngOnInit` I think you'll get what you want. – Joshua Terrill Dec 10 '18 at 10:00
  • Yeah, `window.scrollTo(0,0)` is work in my component, Is it a good way to use `window` directly? `window.onscroll` can be using '@HostListener', it's work. I mean like `$('#element').scrollTop()`, `$('#element').position().top` event, I don't know how to achieve these events in angular. – Finn Dec 11 '18 at 01:40
  • using `window.scrollTo(0, 0)` run with angular universal, the log show the error message `window is not defined` – Finn Dec 11 '18 at 03:37
  • I am not seeing that... what version of angular are you using? – Joshua Terrill Dec 11 '18 at 05:48
  • angular 6 (6.0.3), `window.scrollTo(0,0)` is work, but when the angular universal(node.js server) starts, there will be an error message `ERROR ReferenceError: window is not defined`. – Finn Dec 11 '18 at 06:17
  • Oh, you didn't mention that you use angular universal. I googled that error and there are quite a few things that come up. You may want to look at them. – Joshua Terrill Dec 13 '18 at 20:00

0 Answers0