2

Is this possible? I want to

1) Get some data on page load with an Observable

2) Update the DOM with that data and render the HTML

3) Find the pixel location of something

4) Scroll the page by an amount dependent on that location

I don't know how to make (3) wait until (2) has finished.

I'm working on this project that uses ngrx and Angular 2 and RxJS Observables to replace this one that uses JQuery.

Here's the particular problem I'm trying to solve. If you pass an anchor id in a url like mypage.html#34, a page will scroll to that point. That's how pages have worked forever. The problem is that if there are fixed headings as divs with css position:fixed at the top of the page, the target anchor in the document will be moved to the top of the page, behind the headings. Moreover, it won't scroll if the data and anchors aren't there initially. So as far as I can tell you need to go to lengths in javascript in order to make it work right. If you know another way, without using an IFRAME, please let me know. I'm open to ideas. I want the anchor id to be in the page's url so I can share links to this page that contains a list and expands the details for the given item and scrolls to it.

Dan Cancro
  • 1,401
  • 5
  • 24
  • 53
  • Why not set your content container with a padding-top same as hearder's height? html: `
    `, css: `header {position: fixed, height: 20px}; content {padding-top: 20px}`.     – Timathon Jan 02 '17 at 17:20
  • Is an html element? I could only find this, which is deprecated https://developer.mozilla.org/en-US/docs/Web/HTML/Element/content – Dan Cancro Jan 02 '17 at 18:57
  • My last comment is no good. For "offsetting content against fixed header", you may refer to this post: http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header. There are some solution based on pure css. And I have mad a codepen with one of the solution, http://codepen.io/rxjs-space/pen/OWLeBd – Timathon Jan 02 '17 at 19:40
  • Thank you very much. That is a nice solution. Unfortunately it doesn't seem to work in my case, probably because the page is rendered on the client so the anchor isn't ready when the browser tries to scroll to it. Also the header is fixed initially, then scrolls off the top after some random amount of content scrolling. It disappears and reappears. I don't understand that yet. I pushed my changes. Here's how it looks: http://imgur.com/a/AUeJO I'll see if any of the others do the trick – Dan Cancro Jan 03 '17 at 01:49
  • The odd behavior of the fixed header (disappears and reappears) may be caused by the `` in your `layout.component.ts`. I don't know about material design. Maybe you can get some help for their gitter channel: https://gitter.im/angular/material2?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge – Timathon Jan 03 '17 at 02:51
  • Why don't you create a subject out of the pixel location and then create an observer of the scroll down function. Whenever the pixel value changes, the function shall run? – notANerdDev Jan 08 '17 at 16:19

1 Answers1

0

  1. create one service:

    @injectable export class whateverService(){ //getter & setter service for position }

  2. in your component class

    export whateverComponent implements OnInit(){ constructor(private serviceObj:whateverService){} ngOnInit(){ // write your logic here like : let x = this.serviceObj.getFunction(); setTimeout(function() { document.getElementById(x).scrollIntoView(); }, 100); } }

Amee Prajapati
  • 696
  • 4
  • 10