当隐藏溢出的容器内的元素上进行焦点时自动滚动 [英] Auto scroll when focus on elements inside container with overflow hidden

问题描述

当使用 overflow：hidden; 时，我注意到了一个奇怪的自动滚动行为： https://codepen.io/anon/pen/aVmavx （您可以使用Tab键更改焦点）。
由于溢出被设置为隐藏，它不会触发 onScroll（）事件。所以我想知道我可以如何控制/重置这个滚动？
我的目标（它不包含在演示中）是隐藏原生滚动条，并在 translateY（）时通过CSS转换重新创建滚动效果。 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;宽度：500px;身高：140px; background-color：white;}＃parent {width：100％; height：100px; overflow：hidden;} ul {list-style：none;保证金：0;填充：0; font-size：0; counter-reset：line;} ul：focus-within {border：2px dashed＃E91E63;} li {padding：16px;宽度：50％;显示：inline-block; text-align：center;} button {border：none;宽度：100％;显示：块;背景颜色：＃3F51B5;白颜色;文字修饰：无; font-size：16px;行高：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><按钮>我可以聚焦＃1< / button>< / li> < li><按钮>我可以聚焦＃2< / button>< / li> < li><按钮>我可以聚焦＃3< / button>< / li> < li><按钮>我可以聚焦＃4< / button>< / li> < li><按钮>我可以聚焦＃5< / button>< / li> < li><按钮>我可以聚焦＃6< / button>< / li> < li><按钮>我可以聚焦＃7< / button>< / li> < li><按钮>我可以聚焦＃8< / button>< / li> < li><按钮>我可以聚焦＃9< / button>< / li> < li>< button id =reset>将焦点移出重置滚动＃10< / button>< / li> < / div>  

I've noticed strange auto scroll behaviour when using overflow: hidden; on a container with focusable elements inside it: https://codepen.io/anon/pen/aVmavx (you can change focus by using tab key). It does not trigger onScroll() event since the overflow is set to hidden. So i wonder how I could control / reset this "scroll"? My goal (it's not included in the demo) is to hide native scroll bar and to re-create a scroll effect with CSS transition on translateY() when the onFocus() event is triggered.

解决方案

You can do it like this :

When you focusout the last button, the scroll of the #parent with overflow-y: hidden will be reset to 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>

这篇关于当隐藏溢出的容器内的元素上进行焦点时自动滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！