Scroll lock

Vue Bootstrap 5 Scroll lock

The mdbScrollLock allows for toggling a scrollbar of a body element - both for the x and y axis.

Note: Read the API tab to find all available options and advanced customization


Basic example

Import the directive from 'mdb-vue-ui-kit' and add mdbScrollLock to the directives object. Attach the directive to the container - if you don't bind a Boolean value it will enable container on insert and disable on unbind. Once connected to the value, it will update each time the value changes. Use .x and .y modifiers to disable scrolling only in the selected direction. By default, without any modifiers, both options are enabled.

Possimus aut animi non delectus sed. Ipsam nihil sint itaque a odit non porro aut. Non alias aut illo voluptatem assumenda. Dolorum eos autem reprehenderit et sit adipisci ad asperiores. Et est id quo doloribus. Est quis velit quasi eaque non et.Voluptatem suscipit perspiciatis repudiandae cum qui consequatur sint. Blanditiis neque accusantium quos voluptatibus provident similique. Debitis maxime fugiat nisi quis temporibus perferendis ducimus. Incidunt molestiae rerum ducimus harum voluptas deleniti laudantium non. Voluptas vero est delectus harum eum.Rerum vel molestiae autem. Quia voluptate doloremque omnis quas autem. Nihil omnis delectus eaque. Aut dicta ab at facere porro ut ut enim. Amet voluptatem porro animi quidem sit. Molestiae id consequatur hic et sed. Nisi sapiente animi at et itaque eos. Nam quia cumque quis. Amet accusamus facilis excepturi consequuntur molestiae ut ut. Non eum sit autem nesciunt rem. Qui sunt illum ex et quisquam qui officia. Velit sed deleniti nam minima consectetur ratione. Nisi eos quis sit iusto autem rerum eos. Officia ut recusandae nemo omnis.Possimus aut animi non delectus sed. Ipsam nihil sint itaque a odit non porro aut. Non alias aut illo voluptatem assumenda. Dolorum eos autem reprehenderit et sit adipisci ad asperiores. Et est id quo doloribus. Est quis velit quasi eaque non et.Voluptatem suscipit perspiciatis repudiandae cum qui consequatur sint. Blanditiis neque accusantium quos voluptatibus provident similique. Debitis maxime fugiat nisi quis temporibus perferendis ducimus. Incidunt molestiae rerum ducimus harum voluptas deleniti laudantium non. Voluptas vero est delectus harum eum.Rerum vel molestiae autem. Quia voluptate doloremque omnis quas autem. Nihil omnis delectus eaque. Aut dicta ab at facere porro ut ut enim. Amet voluptatem porro animi quidem sit. Molestiae id consequatur hic et sed. Nisi sapiente animi at et itaque eos. Nam quia cumque quis. Amet accusamus facilis excepturi consequuntur molestiae ut ut. Non eum sit autem nesciunt rem. Qui sunt illum ex et quisquam qui officia. Velit sed deleniti nam minima consectetur ratione. Nisi eos quis sit iusto autem rerum eos. Officia ut recusandae nemo omnis.

        
            
            <template>
              <MDBBtn @click="toggleScroll = !toggleScroll">Disable (or enable) scroll on this site</MDBBtn>
              <div v-mdb-scroll-lock="toggleScroll" style="height: 150px; overflow: auto;">
                <p>Possimus aut animi non delectus sed. Ipsam nihil sint itaque a odit non porro aut. Non alias aut illo voluptatem assumenda. Dolorum eos autem reprehenderit et sit adipisci ad asperiores. Et est id quo doloribus. Est quis velit quasi eaque non et.Voluptatem suscipit perspiciatis repudiandae cum qui consequatur sint. Blanditiis neque accusantium quos voluptatibus provident similique. Debitis maxime fugiat nisi quis temporibus perferendis ducimus. Incidunt molestiae rerum ducimus harum voluptas deleniti laudantium non. Voluptas vero est delectus harum eum.Rerum vel molestiae autem. Quia voluptate doloremque omnis quas autem. Nihil omnis delectus eaque. Aut dicta ab at facere porro ut ut enim. Amet voluptatem porro animi quidem sit. Molestiae id consequatur hic et sed. Nisi sapiente animi at et itaque eos. Nam quia cumque quis. Amet accusamus facilis excepturi consequuntur molestiae ut ut. Non eum sit autem nesciunt rem. Qui sunt illum ex et quisquam qui officia. Velit sed deleniti nam minima consectetur ratione. Nisi eos quis sit iusto autem rerum eos. Officia ut recusandae nemo omnis.</p>
              </div>
            </template>
          
        
    
        
            
            <script>
              import { ref } from "vue";
              import { MDBBtn, mdbScrollLock } from "mdb-vue-ui-kit";
              export default {
                components: {
                  MDBBtn
                },
                directives: {
                  mdbScrollLock
                },
                setup() {
                  const toggleScroll = ref(false);

                  return { toggleScroll }
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { ref } from "vue";
              import { MDBBtn, mdbScrollLock as vMdbScrollLock } from "mdb-vue-ui-kit";

              const toggleScroll = ref(false);
            </script>
          
        
    

Modal example

Import the directive from 'mdb-vue-ui-kit' and add mdbScrollLock to the directives object. Attach the directive to the container - if you don't bind a Boolean value it will enable container on insert and disable on unbind. Once connected to the value, it will update each time the value changes. Use .x and .y modifiers to disable scrolling only in the selected direction. By default, without any modifiers, both options are enabled.

Porttitor lacus luctus accumsan tortor posuere ac. Pretium aenean pharetra magna ac placerat vestibulum lectus mauris. Dui ut ornare lectus sit amet est placerat in. Scelerisque viverra mauris in aliquam sem fringilla ut morbi tincidunt. Odio morbi quis commodo odio. Augue ut lectus arcu bibendum at varius vel. Cras adipiscing enim eu turpis egestas. Placerat in egestas erat imperdiet sed. Sit amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Purus viverra accumsan in nisl nisi. Sollicitudin ac orci phasellus egestas tellus rutrum. Nisi porta lorem mollis aliquam. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin.

Porttitor lacus luctus accumsan tortor posuere ac. Pretium aenean pharetra magna ac placerat vestibulum lectus mauris. Dui ut ornare lectus sit amet est placerat in. Scelerisque viverra mauris in aliquam sem fringilla ut morbi tincidunt. Odio morbi quis commodo odio. Augue ut lectus arcu bibendum at varius vel. Cras adipiscing enim eu turpis egestas. Placerat in egestas erat imperdiet sed. Sit amet consectetur adipiscing elit duis tristique sollicitudin nibh sit. Purus viverra accumsan in nisl nisi. Sollicitudin ac orci phasellus egestas tellus rutrum. Nisi porta lorem mollis aliquam. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin.

        
            
            <template>
              <MDBBtn @click="toggleScroll = !toggleScroll" color="primary">Launch the modal & lock the screen</MDBBtn>
              <div
                v-if="toggleScroll"
                v-mdb-scroll-lock="toggleScroll"
                class="border p-4 text-center mb-4 shadow-3-strong"
                style="
                  z-index: 1;
                  position: fixed;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  width: 300px;
                  height: 400px;
                  overflow-x: hidden;
                  background-color: white;">
                <p class="text-start">
                  Porttitor lacus luctus accumsan tortor posuere ac. Pretium
                  aenean pharetra magna ac placerat vestibulum lectus mauris. Dui
                  ut ornare lectus sit amet est placerat in. Scelerisque viverra
                  mauris in aliquam sem fringilla ut morbi tincidunt. Odio morbi
                  quis commodo odio. Augue ut lectus arcu bibendum at varius vel.
                  Cras adipiscing enim eu turpis egestas. Placerat in egestas erat
                  imperdiet sed. Sit amet consectetur adipiscing elit duis
                  tristique sollicitudin nibh sit. Purus viverra accumsan in nisl
                  nisi. Sollicitudin ac orci phasellus egestas tellus rutrum. Nisi
                  porta lorem mollis aliquam. Nec tincidunt praesent semper
                  feugiat nibh sed pulvinar proin.
                </p>
                  <MDBBtn @click="toggleScroll = false" class="w-100 mb-3" color="primary">
                    Close the modal
                    </MDBBtn>
                </div>
                <p class="mt-4 text-start">
                  Porttitor lacus luctus accumsan tortor posuere ac. Pretium aenean
                  pharetra magna ac placerat vestibulum lectus mauris. Dui ut ornare
                  lectus sit amet est placerat in. Scelerisque viverra mauris in
                  aliquam sem fringilla ut morbi tincidunt. Odio morbi quis commodo
                  odio. Augue ut lectus arcu bibendum at varius vel. Cras adipiscing
                  enim eu turpis egestas. Placerat in egestas erat imperdiet sed.
                  Sit amet consectetur adipiscing elit duis tristique sollicitudin
                  nibh sit. Purus viverra accumsan in nisl nisi. Sollicitudin ac
                  orci phasellus egestas tellus rutrum. Nisi porta lorem mollis
                  aliquam. Nec tincidunt praesent semper feugiat nibh sed pulvinar
                  proin.
                </p>
              </template>
          
        
    
        
            
            <script>
              import { ref } from "vue";
              import { MDBBtn, mdbScrollLock } from "mdb-vue-ui-kit";

              export default {
                components: {
                  MDBBtn
                },
                directives: {
                  mdbScrollLock
                },
                setup() {
                  const toggleScroll = ref(false);
  
                  return { toggleScroll }
                }
                };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { ref } from "vue";
              import { MDBBtn, mdbScrollLock as vMdbScrollLock } from "mdb-vue-ui-kit";

              const toggleScroll = ref(false);
            </script>
          
        
    

Scroll lock - API


Import

        
            
          <script>
            import {
              mdbScrollLock
            } from 'mdb-vue-ui-kit';
          </script>
        
        
    

Options

Name Description Example
.x Blocks only horizontal scroll. <div v-mdb-scroll-lock.x="toggledBoolean"></div>
.y Blocks only vertical scroll. <div v-mdb-scroll-lock.y="toggledBoolean"></div>