Div scrolling freezes sometimes if I use -webkit-overflow-scrolling

Question

if I use -webkit-overflow-scrolling for a scrolling div, it scrolls perfectly with native momentum. But, div itself sometimes freezes and does not respond my fi

Answer 1

Try using overflow: hidden on body. This should resolve the issue: https://codepen.io/cppleon/pen/vYOgKzX

HTML

CSS

body {
  /* magic is here */
  overflow: hidden;
}

#scrollable-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: gray;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.site-header {
  width: 100%;
  height: 120px;
  background-color: orange;
}

.main-content {
  height: 200%;
}