question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't control Scroll in md-sidenav

See original GitHub issue

Bug, feature request, or proposal:

Sidenav could use a function to scroll back to top. Not sure why I can’t force it right now

What is the expected behavior?

When calling Window.window.scrollTo(0,0) I’d expect the page to go back to the top. (note: this is actually a singleton provided by a service in my code, so all components within a heirarchy can control same window.

What is the current behavior?

It doesn’t… and only when I say Window.window.scrollTo(10,0) it does a subset of the time.

What are the steps to reproduce?

I implemented the normal md-sidenav, where we have side navigation content, and main content But I can’t use Window.window.scrollTo(0,0) to force content back to top of page.

This is how I’m currently setting up in CSS

md-sidenav-container {
  height: 100%;
  position:fixed;
}
md-sidenav {
  width: 300px;
  background: white;
}
md-sidenav mat-sidenav {
  height: 100%;
}
html, body, material-app, md-sidenav-container, .my-content {
  margin: 0;
  width: 100%;
  height: 100%;

  transform: initial !important;
}

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

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

"@angular/animations": "^4.1.3",
"@angular/cli": "^1.2.0",
"@angular/common": "^4.1.3",
"@angular/compiler": "^4.1.3",
"@angular/compiler-cli": "^4.1.3",
"@angular/core": "^4.1.3",
"@angular/forms": "^4.1.3",
"@angular/http": "^4.1.3",
"@angular/material": "^2.0.0-beta.7",

Is there anything else we should know?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

10reactions
tiancovicicommented, Jul 25, 2017

Solved I inspected it, turns out there’s a div inside MdSidenavbar with cdk-scrollable

screen shot 2017-07-24 at 7 14 29 pm

So added following line in controller (component.ts) document.querySelector(‘[cdk-scrollable]’).scrollTop = 0;

0reactions
angular-automatic-lock-bot[bot]commented, Sep 6, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can't control Scroll in md-sidenav · Issue #5627 - GitHub
But I can't use Window.window.scrollTo(0,0) to force content back to top of page. This is how I'm currently setting up in CSS.
Read more >
Angular material not firing scroll event - Stack Overflow
Unfortunately it's not working and I can't fire scroll event. What am I doing wrong, and how can I fix that ?
Read more >
Sidenav - Angular Material
Measures the scroll offset relative to the specified edge of the viewport. This method can be used instead of directly checking scrollLeft or...
Read more >
angular/material2 - Gitter
i can't import this MdFormFieldModule from angular/material ... is there any material2 to control the scrolling on that div like say if I...
Read more >
Directives > mdSidenav - AngularJS Material
md-disable-scroll-target string, string. Selector, pointing to an element, whose scrolling will be disabled when the sidenav is opened. By default this is the ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found