有没有办法防止父容器在子节点聚焦时滚动？

Question

Situation: there is a fixed-height parent div with overflow: auto and enough child "line-item" divs of sufficient height to trigger the presence of scrollbars. Each of these child divs has tabindex=-1 so can be programmatically focused.

When any of these child divs is programmatically focused, the default behavior of the browser (in this case, Chrome 55) seems to be to scroll the parent div to center the newly-focused child. Is there any way to prevent this behavior?

Answer 1

Yes and no. There is not a way to prevent the parent element from scrolling to the focused element (that I know of). However, you can undo the scrolling by scrolling the parent element back to the top. Done correctly, it won't be noticeable to the user.

To do this, anytime you programmatically focus an element, retrieve the current scroll offset of the focused element's parent node and set scrollTop to that offset.

 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> 

Here's the working demo on Codepen .