SmoothScroll inside scrollable Modal (MDB4)

Topic: SmoothScroll inside scrollable Modal (MDB4)

akrolis pro asked 1 year 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>

Add comment

Arkadiusz Idzikowski staff answered 1 year ago

0 0 Best answer

<p>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 <code>modal-body</code> HTML code):</p>

<pre class="prettyprint"><code>  <div class="modal-body" #container>
      
      <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>
</code></pre>

<pre class="prettyprint"><code>  @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);
  }
</code></pre>

<p>You can still use options like <code>pageScrollDuration</code>, just add the option configuration to the <code>PageScrollInstance</code> object.</p>

Please insert min. 20 characters.

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 1 year ago

It works, thanks for the help.

Add comment

Write

Create snippet

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

akrolis

Pro User 191Support score
24Questions 7Answers 0Snippets