자식 노드에 포커스가있을 때 부모 컨테이너가 스크롤하지 못하도록하는 방법이 있습니까?

Question

상황 : overflow: auto의 고정 높이 부모 div와 충분한 높이의 자식 "line-item"div가 스크롤 막대의 존재를 트리거하기에 충분합니다. 각 자식 div는 tabindex = -1이므로 프로그래밍 방식으로 집중 될 수 있습니다.

이러한 하위 div 중 하나에 프로그래밍 방식으로 포커스가 설정된 경우 브라우저의 기본 동작 (이 경우 Chrome 55)은 새로 포커스가있는 하위를 가운데로 이동하기 위해 상위 div를 스크롤하는 것으로 보입니다. 이 문제를 방지 할 수있는 방법이 있습니까?

Answer 1

예 아니요. 상위 요소가 집중 요소 (내가 아는)로 스크롤하지 못하게하는 방법은 없습니다. 그러나 부모 요소를 맨 위로 스크롤하여 스크롤을 취소 할 수 있습니다. 올바르게 완료되면 사용자에게 눈에 띄지 않습니다.

이렇게하려면 프로그래밍 방식으로 요소를 포커스 할 때마다 포커스가있는 요소의 부모 노드의 현재 스크롤 오프셋을 검색하고 scrollTop을 해당 오프셋으로 설정하십시오.

var children = document.getElementsByClassName('child') 
 

 
for (var i = 0; i < children.length; i++) { 
 
    children[i].addEventListener('click', function (e) { 
 
    e.preventDefault 
 
    var focused = document.getElementById('focus') 
 
    var focusedParent = focused.parentNode 
 
    var savedOffset = focusedParent.scrollTop 
 
    focused.focus(); 
 
    focused.parentNode.scrollTop = savedOffset; 
 
    }) 
 
}

.parent { 
 
    height: 300px; 
 
    overflow: auto; 
 
} 
 

 
.child { 
 
    height: 50px; 
 
    background-color: gray; 
 
    border-bottom: 1px solid black; 
 
    color: white; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    font-family: Arial; 
 
}

<div class="parent"> 
 
    <div class="child" tabIndex="-1">1</div> 
 
    <div class="child" tabIndex="-1">2</div> 
 
    <div class="child" tabIndex="-1">3</div> 
 
    <div class="child" tabIndex="-1">4</div> 
 
    <div class="child" tabIndex="-1">5</div> 
 
    <div class="child" tabIndex="-1">6</div> 
 
    <div class="child" tabIndex="-1">7</div> 
 
    <div class="child" tabIndex="-1">8</div> 
 
    <div class="child" tabIndex="-1" id="focus">9</div> 
 
    <div class="child" tabIndex="-1">10</div> 
 
</div>

여기 Codepen에 작업 데모입니다.