Jimmy Jung

React developer
Interested in cloud skills like AWS

1 minute read

Preventing IOS elastic scrolling stretegies.

“keep the elastic effect out of my f…king page”


1. using e.preventDefault() when window.scrollTop < 0

didn’t work properly e.preventDefault acts on basic actions that can be excuted without any event handlers like checkbox, radio button, refresh after form submitting and etc.

// try this one ->  scrolling doesn't work at all
<body ontouchmove=BlockMove(event)>
...
</body>
<script>
function BlockMove(event){
    event.preventDefault();
}
</script>


2. ~set {position:fixed, height:100vh, overflow:hidden} at the highest level container that is containing elements on the page.~

Not a proper solution. still had an issue

the elastic scroll effect acts on Document so even if you set those properties to your css file, actually, the scrolling event is being fired but it looks like the elastic effect is not working as you wanted. because position fixed gets your elements to be shown based on your viewport. if you set up the screen for the scrollbar to be seen, then you can see that the effect actually hasn’t been gone.



…so then how to workaround this issue?

  • 1. create scrolling div box and set the css like {overflow-y:scroll, height: 100%} and add new scroll event listener to a new div inside the highest level container element having {position:fixed, left:0; right:0, top:0, overflow-y:hidden, height: 100vh}

it wasn’t as smooth as I thought, so in the end I had to fix this code. but if you desperately need a solution and tried whatever looks likely to work, then go for it!


example

// style.scss

.toplevel_container{
  position: fixed;
  left:0;
  right:0;
  top:0;
  height: 100vh;
  overflow: hidden;
  .scroll_area{
      height: 100%;
      overflow-y: scroll;

      ... else css properties you need
  }
}
  • 2. if there are any chances you can control ths UI dynamically, “Lock the body element up to the context you are in, using this css code ({height: 100vh; overflow: hidden})” and child element should have height 100% in this case.

I sorted out my problem with this way,

if(lock){
  document.body.style.height = "100vh";
  document.body.style.overflow = "hidden";
}
if(!lock){
  document.body.style.height = "auto";
  document.body.style.overflow = "auto";
}

Wrapping up

To be honest with you all, I guess I haven’t found all-rounded solution to disable the elastic scroll effect on the IOS devices yet. but I am toally curious and want to conquer this issue til I get the saticefied solutions. so if you guys want to share yall’s issues, please comment down below, then I will have a look too!

Leave a comment

You may also enjoy