<style>
.modal-box{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal-mask{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 1;
display: flex;;
align-items: center;
justify-content: center;
overflow: hidden;
}
.text{
position: relative;
display: inline-block;
border: 1px solid red;
font-size: 15px;
z-index: 2;
color: #fff;
}
.rule{
height: 300px;
width: 300px;
overflow: scroll;
border:1px solid gold;
color: #fff;
}
</style>
<div style="height:800px"></div>
<div class="modal-box" >
<div class="modal-mask">
<div class="modal-inner">
<div class="rule">
<span class="text">hello world</span>
<p style="height: 1000px;border: 1px solid red">12345678</p>
</div>
</div>
</div>
</div>
<script>
function stopScroll(e){
e.preventDefault();
e.stopPropagation()
}
document.querySelector('.modal-box').addEventListener('touchmove', stopScroll, false)
document.querySelector('.rule').addEventListener('touchmove', function(e){
e.stopPropagation()
}, false)
</script>
Created
August 20, 2019 09:51
-
-
Save mutongwu/da1a4fe849b50a470b8852fa3ed68cf1 to your computer and use it in GitHub Desktop.
modal stop scroll
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment