HTML 禁用滚动(登录屏幕)输入您的登录名和密码

问题描述 投票:0回答:1

在我的电脑上它不会滚动,但当我在移动设备上打开它时它会滚动(这是用于登录屏幕)

<!DOCTYPE html>
<html>
<head>
<title>Enter your login and password</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
      body,td { font-family: Arial; color: #666666; font-size: 1.00em; font-weight: normal; font-style: normal; }
      body { text-align:center; background-color: transparent; }
    </style>
    </head>
    <body>
<!-- 1357 -->
<!--form-start-->
<div style="text-align: center;">
<div style="box-sizing: border-box; display: inline-block; width: auto; max-width: 600px; background-color: #FFFFFF; border: 1px solid #3A3A3A; border-radius: 5px; box-shadow: 0px 0px 8px #3A3A3A; margin: 50px auto auto;" id="ap_form_box">
<div style="background: #3A3A3A; border-radius: 5px 5px 0px 0px; padding: 15px 25px; position: relative"><span style="font-family: Arial; color: #FFFFFF; font-size: 1.40em; font-weight:bold; text-transform: none" id="ap_form_head">Enter your login and password</span></div>
<div style="background: #FFFFFF; padding: 15px" id="ap_style">
<style type="text/css" scoped>
    #ap_style td { text-align:left; font-family: Arial; color: #666666; font-size: 1.00em; border: 0px; }
    #ap_style td a { color: #666666; }
    #ap_style input,select { border: 1px solid #CCCCCC; border-radius: 5px; color: #666666; display: inline-block; font-size: 1.00em; box-sizing: border-box; padding: 5px; }
    #ap_style input[type="text"], input[type="password"], input[type="email"], input[type="number"], select { width: 100%; background-color: #FFFFFF; }
    #ap_style input[type="button"], input[type="reset"], input[type="submit"] { height: auto; width: auto; cursor: pointer; box-shadow: 0px 0px 5px #3A3A3A; background: buttonface; float: right; text-align:right; margin-top: 10px; margin-left:7px;}
    #ap_style input[type="checkbox"], input[type="radio"] { height: 1.00em; width: 1.00em; }
    #ap_style table.center { margin-left:auto; margin-right:auto; border: 0px; }
    #ap_style .error { font-family: Arial; color: #FF3333; font-size: 1.00em; padding-bottom:10px; }
    #ap_style .error_note { display: block; font-family: Arial; color: #FF3333; font-size: 0.85em; padding-top:3px; }
    #ap_style .error_box { border: 1px solid #FF3333; }
    .ap_footer { width:100% text-align: center; font-size:smaller; background: #3A3A3A; color: #FFFFFF } .ap_footer a { color: #FFFFFF; font-style: italic; }
    * { target-new: tab ! important }
</style>

<form method="post" action="https://www.authpro.com/auth/nilsie12/" name="aform" >
<input type="hidden" name="action" value="login">
<input type="hidden" name="user" value="nilsie12">
<input type="hidden" name="hide" value="">
<table id='ap_table_login' class='center'>
<tr style='display:none' id='ap_form_err'><td colspan='2' id='ap_form_errmes' class='error'>You have entered incorrect login or password.<br> Please try again.<br><br></td></tr>
<tr style='display:none'   id='ap_form_inf'><td colspan='2' id='ap_form_infmes'></td></tr>
<tr class='ap_form_inp'><td>Username:</td><td><input type="text" name="login" value="" autocorrect="off" autocapitalize="off" autocomplete="username"></td></tr>
<tr class='ap_form_inp'><td>Password:</td><td><input type="password" name="password" autocomplete="current-password"></td></tr>
<tr><td>&nbsp;</td><td align='left'><input type='checkbox' name='remember' value='1'> Remember me</td></tr>
<tr id='ap_form_isb'><td>&nbsp;</td><td><input type="submit" id='ap_form_btn' value="Enter"></td></tr>
<tr><td colspan=2>&nbsp;</td></tr>
<tr><td colspan='2' id='ap_form_lostmes'><a href="https://www.authpro.com/auth/nilsie12/?action=lost">Forgot your username or password?</a></td></tr>
</table>
</form>
<script type="text/javascript" src="https://www.authpro.com/js/aform.js"></script>
    
</div></div></div>

</html>

这里它不滚动,这很好,但在移动设备上有一个滚动条。 (https://i.stack.imgur.com/z4EWz.png)

我环顾四周,尝试了一些在这个网站上的另一个问题上 asnwerd 的代码,但没有任何效果,这也是我第一次做 HTML

html scroll scrollbar
1个回答
0
投票

只需在样式标签中添加以下代码,或者直接复制粘贴到您的代码中。

::-webkit-scrollbar {
    display: none;
}

html {
    scrollbar-width: none;
}

body {
    -ms-overflow-style: none;
}
© www.soinside.com 2019 - 2024. All rights reserved.