Components: Window.scroll is broken by material

Created on 29 May 2018  路  4Comments  路  Source: angular/components

Bug, feature request, or proposal:

window.scroll() does not work on pages with material

What is the expected behavior?

window.scroll(0, 1500) in browser console should scroll the page

What is the current behavior?

no scroll occurs

What are the steps to reproduce?

run window.scroll(0, 1500) on https://v5.material.angular.io/ (or v6)

What is the use-case or motivation for changing an existing behavior?

scroll is useful

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular material - 5.2.4, 6
Chrome 66, Windows 7
Firefox 59, Windows 7

Is there anything else we should know?

assuming angular docs are written in angular, it's working in angular (tried using window.scroll here and it worked https://angular.io/api/common/http/HttpClient)

This used to work, but I'm not sure when. I don't think it has to do with v6

Printing the value of window.scroll shows a function with native code, so it doesn't appear to be re-assigned. I tried assigning a proxy function to print out when window scroll is called to see if it was being cancelled out or something, but no calls were made except the ones from myself.

There's no errors in the console, it just fails silently.

Most helpful comment

That's because window.scroll will only scroll if the scrollable content is the body or html, but in our case the content is inside the mat-sidenav-content. This one will work:

document.querySelector('mat-sidenav-content').scrollTop = 1500;

Closing since this is an implementation detail of our docs site, rather than an issue with Material.

All 4 comments

That's because window.scroll will only scroll if the scrollable content is the body or html, but in our case the content is inside the mat-sidenav-content. This one will work:

document.querySelector('mat-sidenav-content').scrollTop = 1500;

Closing since this is an implementation detail of our docs site, rather than an issue with Material.

Ah okay, thanks. This is ultimately related to the fact that by default angular elements have size 0x0. If you set all elements to display: block, then it would still work normally. I had recently converted my content to all be inside mat-sidenav-content, which explains it.

@narthur157 can you find there is the doc that @crisbeto mentioned?

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings