팝업에서 스크롤에 초점을 가게 수정하고 싶습니다!

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
팝업에서 스크롤에 초점을 가게 수정하고 싶습니다!

QA

팝업에서 스크롤에 초점을 가게 수정하고 싶습니다!

답변 1

본문

 

1893379372_1733818711.2036.png

 

안녕하세요 열심히 공부하다가 부족해서 질문하러 오게 되었습니다,,,

이렇게 팝업창을 띄웠는데 키보드만 사용해서 안에 기능이 다 사용이 되어야하는데

스크롤 기능에 초점이 가지않고, 키보드만 사용시에 스크롤이 불가능하여서 수정하려고 합니다.

 

 

스크립트는

function popup() {
        $("#Layers").show();
        $("body").css("overflow", "hidden");
    }

    function selectChange() {
        $('#paramKey9').val( $('#domain').val() ).val();
    }
    
    $("#view_close").click(function () {
        $("#Layers").hide();
        $("body").css("overflow", "");
    });
    
    $("#view_close").focus(function () {
        $("#Layers").append("<a href='javascript:void(0);' class='linkAppend'></a>");
        $(".linkAppend").focus(function() {
            $('#Layers').attr("tabindex", "0").focus();
            $(".linkAppend").remove();
        });
    });

 

소스 구조는

<div class="Layer l" id="Layers" style="" tabindex="0">
                 <div class="LY_1">
                     <div class="Layer_head">
                         <p>1209121012111213</p>
                     </div>
                     <div class="Layer_body">
                         <p>22222<br>333333333333333</p> 
                         <ul class="mb10">
                             <li class="mt10 pl16">
                                 <p class="ti16">2222222222222</p>
                                 <ul class="pl8 fs15 thin">
                                     <li class="ti8 mt3">000000</li>
                                     <li class="ti8 mt3">123123123</li>
                                     <li></li>
                                     <li class="ti8 mt3">aaaaaa </li>
                                 </ul>
                             </li>
                             <li class="mt10">aaaaaaaaaaaaaaaaaa </li>
                             <li class="mt10">dadadadada</li>
                         </ul>
                         <div class="pl8">
                             <p class="refer fs13 ti8">123123123123123</p>
                             <p class="refer fs13 ti8">0564as654d5a6s45as6d4a65sd4a65sd4a65sd4as65d4as5d64as65d5as45d6ad4as6d45</p>
                         </div>
                     </div>
                 </div>
                 <div class="Layer_close">
                     <a href="javascript:void(0)" class="bt-close" id="view_close"><span>close</span></a>
                 </div>
             </div>

이렇게 되어있습니다!

많이 부족한데 항상 도움주셔서 감사합니다!

이 질문에 댓글 쓰기 :

답변 1

※ 팝업이 열릴 때 해당 영역에 초점이 잡히고 키보드로 스크롤이 가능하도록

  focuskeydown 이벤트를 활용해야 합니다.

 

- 코드 수정을 참고하여 보세요.


function popup() {
    $("#Layers").show();
    $("body").css("overflow", "hidden");
    $("#Layers").attr("tabindex", "0").focus(); // 팝업 열릴 때 초점 설정
}
function selectChange() {
    $('#paramKey9').val($('#domain').val()).val();
}
$("#view_close").click(function () {
    $("#Layers").hide();
    $("body").css("overflow", "");
});
$("#view_close").focus(function () {
    $("#Layers").append("<a href='javascript:void(0);' class='linkAppend'></a>");
    $(".linkAppend").focus(function () {
        $('#Layers').attr("tabindex", "0").focus();
        $(".linkAppend").remove();
    });
});
// 키보드 이벤트 추가 (위/아래 방향키로 스크롤 가능)
$("#Layers").on("keydown", function (e) {
    if (e.key === "ArrowDown") {
        this.scrollTop += 20; // 아래로 스크롤
        e.preventDefault();
    } else if (e.key === "ArrowUp") {
        this.scrollTop -= 20; // 위로 스크롤
        e.preventDefault();
    }
});
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 3
© SIRSOFT
현재 페이지 제일 처음으로