Currently, I am facing an issue with a bootstrap modal. I have created a div with overflow:auto inside the modal. Everything works fine on desktop, but on mobile devices, when I scroll the content of the div, the modal itself also scrolls. How can I prevent this behavior and make the modal stay fixed while scrolling the div?
To implement the scrollbar, I am using a plugin called perfectscrollBar.js.
Within my modal body, I have the following div:
<div class="list"><ul></ul></div>
And I add <li></li> elements from JavaScript, resulting in the following structure:
<div class="list">
<ul>
<li>Jhon</li>
<li>Mark</li>
</ul>
</div>
The CSS for the div with the class list is defined as:
.list {
height: 70px;
overflow: auto;
}
So, once the div is populated, it becomes scrollable. The custom scrollbar using perfectscrollBar.js is simply implemented using jQuery:
$(".list").perfectScrollbar();