0
今すぐ。 2つのボタンがあります。ボタンを1つクリックすると、#maskが表示されます。デバイス画面でマスクを固定する方法
私の携帯電話でこのウェブを見ることができます。 実際に言うと、私は、モバイルビューの内側にある1つのイメージをタップする必要があります。次に、イメージがそのサイズを変更し、モバイルビューの上に表示されます（上記はset => index：99999を意味します）。
これは私のコードです。
<head>
<meta charset="UTF-8">
<title>textFixCover</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="fonts/iconfont.js"></script>
<style type="text/css">
html {
background-color: #fff;
height: 2000px;
position: relative;
}
#mask {
position: fix;
top: 20px;
left: 0;
right: 0;
height: 600px;
display: none;
background-color: greenyellow;
z-index: 99999;
}
#mask .mui-slider {
position: absolute;
top: 20px;
bottom: 0;
left: 0;
right: 0;
height: 400px;
}
#bottom-btn {
margin-top: 1400px;
height: 100px;
width: 100%;
background-color: #4CD964;
}
#top-btn {
margin-top: 400px;
height: 100px;
width: 100%;
background-color: #FF5053;
}
</style>
</head>
<body>
<section id="top-btn"></section>
<select id="mask"> </select>
<section id="bottom-btn"></section>
<script type="text/javascript">
$('#top-btn').click(function(){
$('#mask').css('display','block');
setTimeout(function(){
$('#mask').css('display','none');
},3000);
});
$('#bottom-btn').click(function(){
$('#mask').css('display','block');
setTimeout(function(){
$('#mask').css('display','none');
},3000);
});
</script>
</body>
現在、私は問題に直面しています。 bottom-btnをクリックすると、現在の画面にマスクを設定する方法が表示されます。デバイスウィンドウ上部の位置を設定します。言い換えれば、デバイスの画面にマスクを固定し、ウェブビューのスクロールを無視します。
私の目標は、bottom btnをクリックすると、デバイスの画面にマスクが表示されます。 ウェブビューをスクロールする必要はありません。
私は、これは完璧な結果であるモバイルデバイス
をシミュレートするために、クロムコンソール上でコードをデバッグします。 
#maskの最上位の位置に20pxの代わりに5vhを使用します。5vhはビューポートを基準にしています。 – Gerard