Topic: SmoothScroll inside scrollable Modal (MDB4)

akrolis pro asked 10 months ago


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>

Arkadiusz Idzikowski staff answered 10 months ago


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.


akrolis pro commented 9 months ago

It works, thanks for the help.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: 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