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

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

QA

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

본문

 

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();
    }
});
답변을 작성하시기 전에 로그인 해주세요.
전체 1
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT