title: How to disable scroll in mobile menu in vue?
body: <p>So basically the toggle for the menu is the checkbox with the id &quot;check&quot; down below. I've tried binding v-bind:class=&quot;[{ 'antiscroll': checkboxValue }]&quot; to the body in html but it didn't work. The same when I tried it in the main App.vue. But it worked when I put it in the nav on the same .vue page. How do I make it work in the body or main vue app? The condition is when the screen is smaller than 1300 width and checkboxValue true then antiscroll class will be bound.</p>
  <pre><code>navigationbar.vue
  &lt;template&gt;
    &lt;nav&gt; &lt;!-- The header menu or navigation bar --&gt;
      &lt;input type=&quot;checkbox&quot; id=&quot;check&quot; v-model=&quot;checkboxValue&quot;&gt; &lt;!-- The three stripe icon for the drop down menu, note: drop down menu only works in smaller screen --&gt;
      &lt;label for=&quot;check&quot; class=&quot;checkbtn&quot;&gt;
        &lt;i class=&quot;fas fa-bars&quot;&gt;&lt;/i&gt;
      &lt;/label&gt;
      &lt;label class=&quot;logo&quot;&gt; &lt;!-- The logo and website name --&gt;
        &lt;router-link to=&quot;/&quot; @click=&quot;uncheck&quot;&gt;
          &lt;img class=&quot;logoimage&quot; src=&quot;#&quot;&gt;
          &lt;font class=&quot;logoname&quot; face=&quot;Arial&quot; style=&quot;float: left; margin-left: 10px; margin-right: 100px&quot;&gt;Test&lt;/font&gt;
        &lt;/router-link&gt;
      &lt;/label&gt;
      &lt;ul&gt; &lt;!-- The menu contains href links to other pages --&gt;
        &lt;li&gt;
          &lt;router-link to=&quot;/&quot; @click=&quot;uncheck&quot;&gt;&lt;b&gt;Home&lt;/b&gt;&lt;/router-link&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;router-link to=&quot;/catalog&quot; @click=&quot;uncheck&quot;&gt;&lt;b&gt;Catalog&lt;/b&gt;&lt;/router-link&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;router-link to=&quot;/about&quot; @click=&quot;uncheck&quot;&gt;&lt;b&gt;About&lt;/b&gt;&lt;/router-link&gt;
        &lt;/li&gt;
        &lt;li&gt; &lt;!-- The search bar --&gt;
        &lt;input type=&quot;search&quot; placeholder=&quot;Search&quot; class=&quot;search&quot; onchange=&quot;Search()&quot; id=&quot;search&quot;&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'navigationbar',
    data () {
      return {
        checkboxValue: false
      }
    },
    methods: {
      uncheck () {
        this.checkboxValue = false
      }
    }
  }
  &lt;/script&gt;
  
  App.vue
  &lt;template&gt;
    &lt;div&gt;
      &lt;navigationbar/&gt;
      &lt;router-view v-slot=&quot;{ Component }&quot;&gt;
        &lt;transition name=&quot;fade&quot; mode=&quot;out-in&quot;&gt;
        &lt;component :is=&quot;Component&quot; /&gt;
        &lt;/transition&gt;
      &lt;/router-view&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import navigationbar from './components/navigationbar.vue'
  
  export default {
    name: 'App',
    components: {
      navigationbar
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  *{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
  }
  body{
    font-family: montserrat;
    background: #c5d5cb;
  }
  nav{
    height: 80px;
  }
  nav ul{
    float: right;
    margin-right: 20px;
  }
  nav ul li{
    display: inline-block;
    line-height: 80px;
    margin: 0 5px;
  }
  nav ul li a{
    color:rgb(22, 22, 22);
    font-size: 17px;
    padding: 7px 13px;
    border-radius: 3px;
    text-transform: uppercase;
  }
  a.router-link-exact-active,a:hover{ /* Changes background color of a button when hovered */
    background: #e9ffe9;
    transition: .5s;
  }
  .checkbtn{
    font-size: 30px;
    color: rgb(22, 22, 22);
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
  }
  #check{
    display: none;
  }
  @media (max-width: 850px){ /* The @media adjust the components when the screen's size reached as low as the value */
    .logoname{
      font-size: 32px;
    }
    .logoimage{
      width: 56px;
    }
    nav ul li a{
      font-size: 16px
    }
  }
  @media (max-width: 450px){
    .logoname{
      display: none;
    }
  }
  @media (max-width: 1300px){
    .checkbtn{
      display: block;
    }
    nav ul{
      position: fixed;
      width: 100%;
      height: 100vh;
      background: #455462;
      top: 80px;
      left: -100%;
      text-align: center;
      transition: all .5s;
    }
    nav ul li{
      display: block;
      margin: 50px 0;
      line-height: 30px;
    }
    nav ul li a{
      font-size: 20px;
    }
    a.router-link-exact-active,a:hover{ /* Changes background color of a button when hovered */
      background: #e9ffe9;
      color: #455462;
    }
    #check:checked ~ ul{
      left: 0;
    }
    .fade-enter-active, .fade-leave-active {
      transition: none !important;
    }
    .fade-enter-from, .fade-leave-to {
      transition: none !important;
    }
  }
  .antiscroll {
    position: fixed;
  }
  &lt;/style&gt;
  
  index.html
  &lt;body v-bind:class=&quot;[{ 'antiscroll': checkboxValue }]&quot;&gt;
    &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>