Vue app that moves it's scrolling into a child div. In case you ever need to create a web app.

enforceScrollingApp.vue

<template>
  <div id="app" @touchmove.prevent>
    <header-bar></header-bar>
    <main @touchmove="enforceScroll">
      <router-view></router-view>
    </main>
    <footer-bar></footer-bar>
  </div>
</template>

<script>
  import HeaderBar from '@/components/HeaderBar';
  import FooterBar from '@/components/FooterBar';

  export default {
    components: { HeaderBar, FooterBar },
    name: 'app',
    methods: {
      enforceScroll(event) {
        const element = event.currentTarget;
        const availableScroll = element.scrollHeight - element.offsetHeight;
        const scrolled = element.scrollTop;

        if (availableScroll === 0) {
          return;
        }

        event.stopPropagation();

        if (scrolled === 0) {
          element.scrollTop = 1;
        } else if (scrolled === availableScroll) {
          element.scrollTop = scrolled - 1;
        }
      },
    },
  };
</script>

<style lang="stylus">
  html, body {
    height: 100%;
    overflow: hidden;
  }

  #app {
    height: 100%;
    display: flex;
    flex-direction: column;

    > * {
      flex: none;
    }
  }

  main {
    flex-grow: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
</style>