Auto scroll when focus on elements inside container with overflow hidden

user_3085500 0
Viewed 2155

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.

scroll scrollbar focus css html
1 Answers

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>

user_58959770
Related