1

src/layouts/index.vue

 <template>
-  <div class="Layout">
+  <div class="Layout ">
       <!-- <header>header</header> -->
       <div class='content'>
           <slot>
@@ -17,3 +17,12 @@ export default Vue.extend({
   name: 'Layout'
 });
 </script>
+<style scoped>
+.Layout{
+    height:100%;
+    width: 100%;
+    position: relative;
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+</style>
\ No newline at end of file

src/main.ts

@@ -5,37 +5,7 @@ import store from './store'
 import './style.css'
 
 Vue.config.productionTip = false
-const overscroll = function(el:any) {
-  el.addEventListener('touchstart', function() {
-    const top = el.scrollTop
-      , totalScroll = el.scrollHeight
-      , currentScroll = top + el.offsetHeight;
-    //If we're at the top or the bottom of the containers
-    //scroll, push up or down one pixel.
-    //
-    //this prevents the scroll from "passing through" to
-    //the body.
-    if(top === 0) {
-      el.scrollTop = 1;
-    } else if(currentScroll === totalScroll) {
-      el.scrollTop = top - 1;
-    }
-  });
-  el.addEventListener('touchmove', function(evt:any) {
-    //if the content is actually scrollable, i.e. the content is long enough
-    //that scrolling can occur
-    if(el.offsetHeight < el.scrollHeight)
-      evt._isScroller = true;
-  });
-}
-overscroll(document.querySelector('.scroll'));
-document.body.addEventListener('touchmove', function(evt:any) {
-  //In this case, the default behavior is scrolling the body, which
-  //would result in an overflow.  Since we don't want that, we preventDefault.
-  if(!evt._isScroller) {
-    evt.preventDefault();
-  }
-});
+
 new Vue({
   router,
   store,

src/style.css

 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-body,
-html{
+
+body{
+    background-color: red;
+    width: 100vw;
+    height: 100vh;
     position: fixed;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+}
+#app{
+    height: 100%;
+    width: 100%;
 }
\ No newline at end of file

src/views/Home.vue

 <template>
-  <div class="home relative overflow-scroll">
-    <div class='page bg-red-600'></div>
-    <div class='page bg-blue-600'></div>
+  <div class="home overflow-y-scroll">
+    <div class='page bg-red'>
+      dfkl
+    </div>
+    <div class='page bg-blue-600'>
+      sdafkljsdlfjlksd
+    </div>
   </div>
 </template>