私は 1 ページの Web サイトを作成しています。各セクションはビューポート全体の高さと幅 (100vw & 100vw) を占有します。モバイル画面の場合、コンテンツが収まるようにメディアクエリを使用して高さを調整しました。問題は、1 つのセクションにユーザーが入力を入力すると、ページが上にスクロールするか、下にスクロールすることがありますか?
なぜこれが起こっているのか分かりませんか?
このフォームの HTML は次のとおりです。
<section id="quote">
<div id="ugallerys" class="uparrow"><img class="centerimage img-responsive" src="images/up.png" />
</div>
<div class="box">
<div class="fwidth container-fluid">
<div class="row">
<div class="col-md-12">
<div id="contentquote">
<form method="POST" id="quoteform">
<div class="form centerfield">
<div class="heading white lesspace">Quote</div>
<hr>
<label for="Full Name">
<h4 class="white center">Full Name</h4>
</label>
<input type="text" class="form-control centerfield lwidth" id="name" onFocus="window.scrollTo(0, 0);" name="name" placeholder="e.g Tom Jones" />
<br />
<div class="centerfield lwidth">
<label for="Book Out Date">
<h4 class="white">Pickup Date</h4>
</label>
<input type="date" class="form-control" onFocus="window.scrollTo(0, 0);" id="bookoutdate" name="bookoutdate" />
</div>
<div class="centerfield lwidth">
<label for="Book In Date">
<h4 class="white">Dropoff Date</h4>
</label>
<input type="date" class="form-control" id="bookindate" name="bookindate" />
</div>
<div class="centerfield lwidth">
<h1><span id="days">0</span> Days</h1>
<hr>
</div>
<div class="centerfield lwidth">
<label for="Age">
<h4 class="white">Age</h4>
</label>
<input type="number" class="form-control" placeholder="e.g. 18" id="age" name="age" />
</div>
<div class="centerfield lwidth">
<label for="Email">
<h4 class="white">Email</h4>
</label>
<input type="email" class="form-control" placeholder="e.g. tomjones@demo.com" id="email" name="email" />
</div>
<div class="centerfield lwidth">
<label for="Contact">
<h4 class="white">Contact Number</h4>
</label>
<input type="number" class="form-control" placeholder="e.g. 03375664399" id="number" name="number" />
</div>
<div class="centerfield lwidth">
<label for="Comments">
<h4 class="white">Comments</h4>
</label>
<textarea class="form-control" id="comments" name="comments"></textarea>
</div>
<div class="toppadding centerfield">
<input type="submit" class="btn btn-success btn-lg" value="Send" name="submit" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="dcontact" class="downarrowsp3"><img class="centerimage img-responsive" src="images/down.png" />
</div>
</section>
このセクションの CSS は次のとおりです。
#quote {
height: 210vh !important;
overflow:hidden;
width: 100vw !important;
background-color: #000000;
margin:0px !important;
padding:0px !important;
}
Web サイト自体へのリンクは次のとおりです: http://www.a1phantom.com/