你可以这样做:
当您聚焦最后一个按钮时,#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