모바일에서 input을 클릭했을때 스크롤을 내리게 하고싶습니다~
본문
안녕하세요.
로그인을 할 때, 아이디 input에다가 입력을 할 때 (클릭할떄) 스크롤이 ID input만큼 내려오게 설정했습니다.
<div class="frmWrap">
<div class="frmItem">
<div class="label">아이디</div>
<input type="text" name="mb_id" class="txtBox id-txtBox" value="<?=$mb_id;?>" autofocus placeholder="">
</div>
<div class="frmItem">
<div class="label">비밀번호</div>
<input type="password" name="mb_password" value="<?=$mb_password;?>" class="txtBox pw-txtBox" placeholder="(영문대소문자/숫자/특수문자 중 2가지 이상조합, 8-16자)">
</div>
</div>
$(function(){
const $id = $(".id-txtBox");
$id.click(function(){
const id_top = $id.offset().top;
$("html, body").scrollTop(id_top);
});
});
$(function(){
const $pw = $(".pw-txtBox");
$pw.click(function(){
const pw_top = $pw.offset().top;
$("html, body").scrollTop(pw_top);
});
});
이렇게요!
근데.. 모바일에서는 input을 두번눌러야 스크롤이 내려가네요 ㅠㅠ 방법이있을까요?
답변 1
테스트는 안해봤습니다.
$(function(){
const $id = $(".id-txtBox");
$id.on('touchstart click', function(e){
const id_top = $id.offset().top;
$("html, body").scrollTop(id_top);
});
});
$(function(){
const $pw = $(".pw-txtBox");
$pw.on('touchstart click', function(e){
const pw_top = $pw.offset().top;
$("html, body").scrollTop(pw_top);
});
});