iOS position: sticky & overflow-scrolling

HTML

<div class="container">
  <div id="list"></div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.header {
  position: -webkit-sticky;
  position: sticky;
  top: 50px;
  left: 0;
  right: 0;
  background-color: #f3f3f3;
  border-bottom: 1px solid #d4d4d4;
}

.child {
  padding-left: 10px;
  color: gray;
}

JavaScript

var list = document.getElementById("list");
for (var i = 0; i < 26; i++) {
	var item = document.createElement("div");
  
	var header = document.createElement("div");
  header.className = "header";
  header.innerHTML = "<span>" + String.fromCharCode(65 + i) + "</span>";
	item.appendChild(header);
  
  for (var j = 0; j < 50; j++) {
    var child = document.createElement("div");
    child.className = "child";
    child.innerHTML = "child " + (j + 1);
    item.appendChild(child);
  }

	list.appendChild(item);
}