Topic: SmoothScroll inside scrollable Modal (MDB4)
Expected behavior
SmoothScroll woking inside a scrollable modal
Actual behavior
It does't scroll inside the modal
Resources (screenshots, code snippets etc.)
SmoothScroll Example: https://mdbootstrap.com/docs/b4/angular/advanced/scroll/#smooth-scroll-section
Inside modal-body of scrollable BasicModal: https://mdbootstrap.com/docs/b4/angular/modals/basic/#s-basic-example
It doesn't scroll with neither modal-dialog-scrollable nor overflow-y: scroll style
<button type="button" mdbBtn color="primary" class="relative waves-light" (click)="basicModal.show()" mdbWavesEffect>Launch demo modal</button>
<div mdbModal #basicModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<!--Navigation links with a Smooth SCroll effect-->
<ul class="list-unstyled">
<li>
<h5><a mdbPageScroll href="#test1">Click to scroll to section 1</a></h5>
</li>
<br>
<li>
<h5><a mdbPageScroll href="#test2">Click to scroll to section 2</a></h5>
</li>
<br>
</ul>
<!--Dummy sections with IDs coressponding with the links above-->
<div id="test1" style="height: 1000px;">
<h3>Section 1</h3>
<hr>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
</div>
<div id="test2" style="height: 1000px;">
<h3>Section 2</h3>
<hr>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
<h5>Smooth Scroll Example</h5>
</div>
</div>
<div class="modal-footer">
<button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
<button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>Save changes</button>
</div>
</div>
</div>
</div>
In this case you would need to change the scrolling container to the modal body element. To do that, you need to use the service that the directive uses under the hood. Here is an example (I slightly modified the modal-body HTML code):
HTML:
<div class="modal-body" #container>
<!--Navigation links with a Smooth SCroll effect-->
<ul class="list-unstyled">
<li>
<h5><a href="javascript:void(0)" (click)="scrollToFirstSection()">Click to scroll to section 1</a></h5>
</li>
<br>
<li>
<h5><a href="javascript:void(0)" (click)="scrollToSecondSection()">Click to scroll to section 2</a></h5>
</li>
<br>
</ul>
...
</div>
TS:
@ViewChild('container') container: ElementRef;
constructor(@Inject(DOCUMENT) private document: any, private pageScrollService: PageScrollService) {}
scrollToFirstSection() {
const pageScrollInstance: PageScrollInstance = PageScrollInstance.newInstance({
document: this.document,
scrollTarget: '#test1',
scrollingViews: [this.container.nativeElement],
});
this.pageScrollService.start(pageScrollInstance);
}
scrollToSecondSection() {
const pageScrollInstance: PageScrollInstance = PageScrollInstance.newInstance({
document: this.document,
scrollTarget: '#test2',
scrollingViews: [this.container.nativeElement]
});
this.pageScrollService.start(pageScrollInstance);
}
You can still use options like pageScrollDuration, just add the option configuration to the PageScrollInstance object.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB4 13.0.0
- Device: Windows
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes