我在使用时注意到奇怪的自动滚动行为overflow: hidden;在里面有可聚焦元素的容器上：https://codepen.io/anon/pen/aVmavx https://codepen.io/anon/pen/aVmavx（您可以使用 Tab 键更改焦点）。
它不会触发onScroll()由于溢出被设置为隐藏而发生的事件。所以我想知道如何控制/重置这个“滚动”？
我的目标（它不包含在演示中）是隐藏本机滚动条并使用 CSS 过渡重新创建滚动效果translateY()当。。。的时候onFocus()事件被触发。
你可以这样做：
当你focusout最后一个按钮，滚动条#parent 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.2/jquery.scrollTo.min.js"></script>
<div id="parent">
<ul>
<li><button>I am focusable #1</button></li>
<li><button>I am focusable #2</button></li>
<li><button>I am focusable #3</button></li>
<li><button>I am focusable #4</button></li>
<li><button>I am focusable #5</button></li>
<li><button>I am focusable #6</button></li>
<li><button>I am focusable #7</button></li>
<li><button>I am focusable #8</button></li>
<li><button>I am focusable #9</button></li>
<li><button id="reset">Focus out reset the scroll #10</button></li>
</ul>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
