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

Question

我在使用overflow: hidden;内部具有可聚焦元素的容器时注意到奇怪的自动滚动行为:https://codepen.io/anon/pen/aVmavx(您可以使用Tab键更改焦点).onScroll()由于溢出设置为隐藏,因此不会触发事件.所以我想知道如何控制/重置这个"滚动"？我的目标(它不包含在演示中)是隐藏本机滚动条并在触发事件translateY()时重新创建具有CSS转换的滚动效果onFocus().

Answer 1

你可以这样做：

当您按下focusout最后一个按钮时，滚动条#parent将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>