Can't control Scroll in md-sidenav
See original GitHub issueBug, 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:
- Created 6 years ago
- Comments:5 (2 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Solved I inspected it, turns out there’s a div inside MdSidenavbar with cdk-scrollable
So added following line in controller (component.ts) document.querySelector(‘[cdk-scrollable]’).scrollTop = 0;
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.