html溢出自动滚动,html – 当焦点集中在隐藏溢出的容器内的元素时自动滚动

你可以这样做：

当您聚焦最后一个按钮时,#overflow with overflow-y：hidden的滚动将重置为0.

$('#reset').focusout(function(){

$('#parent').scrollTo(0);

});

* {

box-sizing: border-box;

}

html, body {

margin: 0;

background-color: whitesmoke;

font-family: Roboto;

}

main {

margin: 16px auto;

width: 500px;

height: 140px;

background-color: white;

}

#parent {

width: 100%;

height: 100px;

overflow: hidden;

}

ul {

list-style: none;

margin: 0;

padding: 0;

font-size: 0;

counter-reset: line;

}

ul:focus-within {

border: 2px dashed #E91E63;

}

li {

padding: 16px;

width: 50%;

display: inline-block;

text-align: center;

}

button {

border: none;

width: 100%;

display: block;

background-color: #3F51B5;

color: white;

text-decoration: none;

font-size: 16px;

line-height: 1.5;

}

button:hover{

color:red;

}

button:focus {

background-color: #E91E63;

}

• I am focusable #1
• I am focusable #2
• I am focusable #3
• I am focusable #4
• I am focusable #5
• I am focusable #6
• I am focusable #7
• I am focusable #8
• I am focusable #9
• Focus out reset the scroll #10