Css + Javascript solution:
Here is a CSS class that disables scrolling:
.lock-scroll{
position: fixed;
width: 100%;
height: 100%;
}
And here are the JavaScript functions to handle scrolling and fix the scrollTop jump issue:
function disableScroll(elem){
var lastScrollTop = $(elem).scrollTop();
$(elem).addClass("lock-scroll");
$(elem).css("top", "-" + lastScrollTop + "px");
}
function enableScroll(elem){
var lastScrollTop = Number($('#wmd-input-39380954').css("top").match(/[0-9]/g).join(""));
$(elem).removeClass("lock-scroll");
$(elem).css("top", "0px");
$(elem).scrollTop(lastScrollTop);
}
Disable scroll by target element
In your index.html file:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<style>
body{
background-color:#333333;
color: white;
}
#modalView{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0,0,0,0.6);
overflow: scroll;
}
#modalViewScroll{
width: 300px;
height: 200px;
overflow: scroll;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
background: white;
color: red;
}
</style>
</head>
<body>
// Your content goes here
// This section will be shown in the modal
<div id="modalView">
<div id="modalViewScroll">
// Modal content with scrolling
</div>
</div>
<script type="text/javascript">
// JavaScript functions for handling scrolling
</script>
</body>
</html>
To avoid scrolling to top with click event fires
If you want to prevent scrolling to the top when a click event fires, add return false; after the click event like this:
Example:
<button onclick="openModal(); return false;">Open Modal</button>
To disable scroll in mobile browsers
To disable scrolling in mobile browsers, you need to set overflow:hidden for the <html> tag as well.
Example:
<html>
<head>
<style>
html,body{overflow:hidden}
</style>
</head>
<body>
// Your HTML body content
</body>
</html>