Scroll Lock MDB Pro component
Vue Bootstrap Scroll Lock - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
This directive allows for toggling a scrollbar of a body element - both for
the x and y axis.
Basic usage
Step 1: Import the directive from 'mdbvue'
<script>
import {
mdbScrollLock
} from "mdbvue";
</script>
Step 2: Add mdbScrollLock to the
directives object
<script>
import {
mdbScrollLock
} from "mdbvue";
export default {
directives: {
mdbScrollLock
}
};
</script>
Step 3: 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.
<template>
<div style="height: 400px; position: relative;" v-mdb-scroll-lock="lock">
<mdb-btn @click.native="lock = !lock" floating tag="a" :bottom="30" :right="25"
:icon="lock ? 'lock' : 'lock-open'" color="grey" size="lg"
style="position: absolute; bottom: 10px; right: 10px;"></mdb-btn>
<div style="overflow-y: scroll; height: 100%;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Laoreet non curabitur gravida arcu ac tortor dignissim convallis
aenean. Id venenatis a condimentum vitae sapien pellentesque.
Amet nulla facilisi morbi tempus iaculis urna id. Pellentesque
adipiscing commodo elit at imperdiet dui accumsan sit. Cursus
euismod quis viverra nibh cras. Non consectetur a erat nam at
lectus urna duis convallis. Et sollicitudin ac orci phasellus
egestas. Viverra nibh cras pulvinar mattis nunc sed blandit.
Commodo nulla facilisi nullam vehicula ipsum a arcu cursus.
Semper risus in hendrerit gravida rutrum quisque non tellus. Id
consectetur purus ut faucibus pulvinar elementum integer enim.
</p>
<p>
Commodo sed egestas egestas fringilla phasellus. Arcu non
sodales neque sodales ut etiam sit. Cras sed felis eget velit
aliquet sagittis id consectetur purus. Ac tortor dignissim
convallis aenean et tortor at. Felis eget nunc lobortis mattis.
Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus
urna. Amet commodo nulla facilisi nullam. Neque ornare aenean
euismod elementum nisi quis eleifend. Est sit amet facilisis
magna etiam tempor orci eu lobortis. Rutrum quisque non tellus
orci ac auctor. Tincidunt id aliquet risus feugiat in ante.
Morbi tristique senectus et netus et. Nunc scelerisque viverra
mauris in aliquam sem fringilla ut morbi. Amet venenatis urna
cursus eget nunc scelerisque viverra mauris in.
</p>
<p>
Ultrices dui sapien eget mi proin sed libero enim. Semper
feugiat nibh sed pulvinar proin gravida hendrerit. Commodo odio
aenean sed adipiscing diam. Maecenas ultricies mi eget mauris
pharetra et ultrices. Sit amet cursus sit amet dictum. Sit amet
consectetur adipiscing elit ut aliquam purus. Donec et odio
pellentesque diam volutpat. Phasellus egestas tellus rutrum
tellus pellentesque eu tincidunt tortor aliquam. Sagittis orci a
scelerisque purus semper eget duis at tellus. Mi tempus
imperdiet nulla malesuada pellentesque elit eget. Eget nullam
non nisi est sit amet facilisis magna etiam. Volutpat commodo
sed egestas egestas fringilla phasellus faucibus. Convallis
tellus id interdum velit. Viverra vitae congue eu consequat ac.
Tristique nulla aliquet enim tortor at auctor urna. Elementum eu
facilisis sed odio morbi quis commodo odio aenean. Odio
facilisis mauris sit amet massa vitae tortor condimentum.
</p>
<p>
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>
<p>
Quisque egestas diam in arcu cursus euismod. Arcu non odio
euismod lacinia at quis risus sed vulputate. Mattis nunc sed
blandit libero volutpat. Pretium nibh ipsum consequat nisl.
Auctor elit sed vulputate mi. Venenatis urna cursus eget nunc
scelerisque viverra mauris. Lacus sed turpis tincidunt id
aliquet. Nam at lectus urna duis convallis convallis tellus id.
Magna sit amet purus gravida quis. Donec ultrices tincidunt arcu
non sodales.
</p>
<p>
Id leo in vitae turpis massa sed elementum tempus egestas.
Tristique senectus et netus et malesuada. Euismod quis viverra
nibh cras pulvinar mattis. Mattis pellentesque id nibh tortor id
aliquet lectus proin. Placerat vestibulum lectus mauris ultrices
eros in cursus turpis. Lacus vestibulum sed arcu non odio
euismod lacinia at. Feugiat scelerisque varius morbi enim nunc.
Habitant morbi tristique senectus et netus et malesuada. Velit
laoreet id donec ultrices tincidunt arcu. Gravida dictum fusce
ut placerat orci.
</p>
<p>
Est placerat in egestas erat imperdiet sed. Amet commodo nulla
facilisi nullam vehicula ipsum a arcu. Etiam erat velit
scelerisque in dictum non consectetur. Id aliquet risus feugiat
in ante metus dictum at tempor. Viverra mauris in aliquam sem
fringilla. Sit amet commodo nulla facilisi. Lectus urna duis
convallis convallis tellus id interdum. Ut etiam sit amet nisl
purus in. Facilisi morbi tempus iaculis urna. Condimentum id
venenatis a condimentum vitae sapien pellentesque habitant. Nisl
rhoncus mattis rhoncus urna neque. Egestas sed sed risus
pretium. Vitae aliquet nec ullamcorper sit. Eu tincidunt tortor
aliquam nulla. Amet massa vitae tortor condimentum lacinia.
Faucibus scelerisque eleifend donec pretium. Habitant morbi
tristique senectus et.
</p>
<p>
Dui sapien eget mi proin sed. A diam maecenas sed enim ut sem
viverra aliquet. Ornare massa eget egestas purus. Velit
dignissim sodales ut eu sem integer vitae justo. Commodo odio
aenean sed adipiscing. Arcu risus quis varius quam. Lacus sed
turpis tincidunt id aliquet risus feugiat in. At volutpat diam
ut venenatis tellus in metus vulputate eu. A diam sollicitudin
tempor id eu nisl. Duis tristique sollicitudin nibh sit amet.
Lectus magna fringilla urna porttitor rhoncus dolor purus. Sit
amet facilisis magna etiam tempor orci eu lobortis. Ut etiam sit
amet nisl purus in mollis nunc. Adipiscing elit pellentesque
habitant morbi tristique senectus et. Tristique senectus et
netus et malesuada fames ac turpis. Vel pharetra vel turpis nunc
eget lorem dolor. Mauris ultrices eros in cursus turpis massa
tincidunt dui ut.
</p>
</div>
</div>
</template>
<script>
import {
mdbBtn,
mdbScrollLock
} from "mdbvue";
export default {
components: {
mdbBtn
},
data() {
return {
lock: false
};
},
directives: {
mdbScrollLock
}
};
</script>
Step 4: Use .x and y modifiers to disable scrolling only in the selected
direction. By default, without any modifiers, both options are enabled.
<template>
<div style="height: 400px; position: relative;" v-mdb-scroll-lock.y="lock">
<mdb-btn @click.native="lock = !lock" floating tag="a" :bottom="30" :right="25"
:icon="lock ? 'lock' : 'lock-open'" color="grey" size="lg"
style="position: absolute; bottom: 10px; right: 10px;"></mdb-btn>
<div style="overflow-y: scroll; height: 100%;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Laoreet non curabitur gravida arcu ac tortor dignissim convallis
aenean. Id venenatis a condimentum vitae sapien pellentesque.
Amet nulla facilisi morbi tempus iaculis urna id. Pellentesque
adipiscing commodo elit at imperdiet dui accumsan sit. Cursus
euismod quis viverra nibh cras. Non consectetur a erat nam at
lectus urna duis convallis. Et sollicitudin ac orci phasellus
egestas. Viverra nibh cras pulvinar mattis nunc sed blandit.
Commodo nulla facilisi nullam vehicula ipsum a arcu cursus.
Semper risus in hendrerit gravida rutrum quisque non tellus. Id
consectetur purus ut faucibus pulvinar elementum integer enim.
</p>
<p>
Commodo sed egestas egestas fringilla phasellus. Arcu non
sodales neque sodales ut etiam sit. Cras sed felis eget velit
aliquet sagittis id consectetur purus. Ac tortor dignissim
convallis aenean et tortor at. Felis eget nunc lobortis mattis.
Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus
urna. Amet commodo nulla facilisi nullam. Neque ornare aenean
euismod elementum nisi quis eleifend. Est sit amet facilisis
magna etiam tempor orci eu lobortis. Rutrum quisque non tellus
orci ac auctor. Tincidunt id aliquet risus feugiat in ante.
Morbi tristique senectus et netus et. Nunc scelerisque viverra
mauris in aliquam sem fringilla ut morbi. Amet venenatis urna
cursus eget nunc scelerisque viverra mauris in.
</p>
<p>
Ultrices dui sapien eget mi proin sed libero enim. Semper
feugiat nibh sed pulvinar proin gravida hendrerit. Commodo odio
aenean sed adipiscing diam. Maecenas ultricies mi eget mauris
pharetra et ultrices. Sit amet cursus sit amet dictum. Sit amet
consectetur adipiscing elit ut aliquam purus. Donec et odio
pellentesque diam volutpat. Phasellus egestas tellus rutrum
tellus pellentesque eu tincidunt tortor aliquam. Sagittis orci a
scelerisque purus semper eget duis at tellus. Mi tempus
imperdiet nulla malesuada pellentesque elit eget. Eget nullam
non nisi est sit amet facilisis magna etiam. Volutpat commodo
sed egestas egestas fringilla phasellus faucibus. Convallis
tellus id interdum velit. Viverra vitae congue eu consequat ac.
Tristique nulla aliquet enim tortor at auctor urna. Elementum eu
facilisis sed odio morbi quis commodo odio aenean. Odio
facilisis mauris sit amet massa vitae tortor condimentum.
</p>
<p>
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>
<p>
Quisque egestas diam in arcu cursus euismod. Arcu non odio
euismod lacinia at quis risus sed vulputate. Mattis nunc sed
blandit libero volutpat. Pretium nibh ipsum consequat nisl.
Auctor elit sed vulputate mi. Venenatis urna cursus eget nunc
scelerisque viverra mauris. Lacus sed turpis tincidunt id
aliquet. Nam at lectus urna duis convallis convallis tellus id.
Magna sit amet purus gravida quis. Donec ultrices tincidunt arcu
non sodales.
</p>
<p>
Id leo in vitae turpis massa sed elementum tempus egestas.
Tristique senectus et netus et malesuada. Euismod quis viverra
nibh cras pulvinar mattis. Mattis pellentesque id nibh tortor id
aliquet lectus proin. Placerat vestibulum lectus mauris ultrices
eros in cursus turpis. Lacus vestibulum sed arcu non odio
euismod lacinia at. Feugiat scelerisque varius morbi enim nunc.
Habitant morbi tristique senectus et netus et malesuada. Velit
laoreet id donec ultrices tincidunt arcu. Gravida dictum fusce
ut placerat orci.
</p>
<p>
Est placerat in egestas erat imperdiet sed. Amet commodo nulla
facilisi nullam vehicula ipsum a arcu. Etiam erat velit
scelerisque in dictum non consectetur. Id aliquet risus feugiat
in ante metus dictum at tempor. Viverra mauris in aliquam sem
fringilla. Sit amet commodo nulla facilisi. Lectus urna duis
convallis convallis tellus id interdum. Ut etiam sit amet nisl
purus in. Facilisi morbi tempus iaculis urna. Condimentum id
venenatis a condimentum vitae sapien pellentesque habitant. Nisl
rhoncus mattis rhoncus urna neque. Egestas sed sed risus
pretium. Vitae aliquet nec ullamcorper sit. Eu tincidunt tortor
aliquam nulla. Amet massa vitae tortor condimentum lacinia.
Faucibus scelerisque eleifend donec pretium. Habitant morbi
tristique senectus et.
</p>
<p>
Dui sapien eget mi proin sed. A diam maecenas sed enim ut sem
viverra aliquet. Ornare massa eget egestas purus. Velit
dignissim sodales ut eu sem integer vitae justo. Commodo odio
aenean sed adipiscing. Arcu risus quis varius quam. Lacus sed
turpis tincidunt id aliquet risus feugiat in. At volutpat diam
ut venenatis tellus in metus vulputate eu. A diam sollicitudin
tempor id eu nisl. Duis tristique sollicitudin nibh sit amet.
Lectus magna fringilla urna porttitor rhoncus dolor purus. Sit
amet facilisis magna etiam tempor orci eu lobortis. Ut etiam sit
amet nisl purus in mollis nunc. Adipiscing elit pellentesque
habitant morbi tristique senectus et. Tristique senectus et
netus et malesuada fames ac turpis. Vel pharetra vel turpis nunc
eget lorem dolor. Mauris ultrices eros in cursus turpis massa
tincidunt dui ut.
</p>
</div>
</div>
</template>
<script>
import {
mdbBtn,
mdbScrollLock
} from "mdbvue";
export default {
components: {
mdbBtn
},
data() {
return {
lock: false
};
},
directives: {
mdbScrollLock
}
};
</script>
Example with modal
Live Preview
<template>
<mdb-container>
<mdb-btn color="grey" @click.native="showModal = true" class="my-3">Launch modal & lock the screen</mdb-btn>
<div class="py-5">
<p>
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>
<p>
Quisque egestas diam in arcu cursus euismod. Arcu non odio
euismod lacinia at quis risus sed vulputate. Mattis nunc sed
blandit libero volutpat. Pretium nibh ipsum consequat nisl.
Auctor elit sed vulputate mi. Venenatis urna cursus eget nunc
scelerisque viverra mauris. Lacus sed turpis tincidunt id
aliquet. Nam at lectus urna duis convallis convallis tellus id.
Magna sit amet purus gravida quis. Donec ultrices tincidunt arcu
non sodales.
</p>
<p>
Id leo in vitae turpis massa sed elementum tempus egestas.
Tristique senectus et netus et malesuada. Euismod quis viverra
nibh cras pulvinar mattis. Mattis pellentesque id nibh tortor id
aliquet lectus proin. Placerat vestibulum lectus mauris ultrices
eros in cursus turpis. Lacus vestibulum sed arcu non odio
euismod lacinia at. Feugiat scelerisque varius morbi enim nunc.
Habitant morbi tristique senectus et netus et malesuada. Velit
laoreet id donec ultrices tincidunt arcu. Gravida dictum fusce
ut placerat orci.
</p>
</div>
<mdb-modal :show="showModal" @close="showModal = false" scrollable removeBackdrop>
<mdb-modal-header>
<mdb-modal-title>Scrolling the window is now disabled</mdb-modal-title>
</mdb-modal-header>
<mdb-modal-body v-mdb-scroll-lock.y>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor
fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor
fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor
fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor
fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo
odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
risus, porta ac consectetur ac, vestibulum at eros.
</p>
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor.
</p>
<p>
Aenean lacinia bibendum nulla sed consectetur. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor
fringilla.
</p>
</mdb-modal-body>
<mdb-modal-footer>
<mdb-btn color="secondary" @click.native="showModal = false">Close & unlock scrolling</mdb-btn>
</mdb-modal-footer>
</mdb-modal>
</mdb-container>
</template>
<script>
import {
mdbContainer,
mdbBtn,
mdbModal,
mdbModalHeader,
mdbModalTitle,
mdbModalBody,
mdbModalFooter,
mdbScrollLock
} from "mdbvue";
export default {
name: "ScrollLockPage",
components: {
mdbContainer,
mdbBtn,
mdbModal,
mdbModalHeader,
mdbModalTitle,
mdbModalBody,
mdbModalFooter
},
data() {
return {
showModal: false
};
},
directives: {
mdbScrollLock
}
};
</script>