Disable scrolling and handle Close method for Sidebar in BootstrapVue

Question

I would like to ask 2 questions about Sidebar in BootstrapVue.

1. Disable scrolling after opened Sidebar
2. How to handle closing method when click outside the Sidebar (Backdrop)

I'm using https://bootstrap-vue.org/docs/components/sidebar

<template>
  <div>
    <b-button v-b-toggle.sidebar-backdrop>Toggle sSidebar</b-button>
    <b-sidebar
      id="sidebar-backdrop"
      title="Sidebar with backdrop"
      backdrop
      shadow
    >
      <div class="px-3 py-2">
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
      </div>
    </b-sidebar>
  </div>
</template>

Thank you and appreciate.

Answer 1

You can remove the scrollbar by adding the bootstrap class overflow-hidden to your body.

Hook a method up to the @change method on the sidebar, which is fired when the sidebar is shown and hidden.

The sidebar also has a @hidden event, which is fired when the sidebar gets hidden.

new Vue({
  el: '#app',
  methods: {
    toggleBodyScrollbar(visible) {
      const body = document.getElementsByTagName('body')[0];

      if(visible)
        body.classList.add("overflow-hidden");
      else
        body.classList.remove("overflow-hidden");
    }
  }
})

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-sidebar id="sidebar-1" title="Sidebar" shadow backdrop @change="toggleBodyScrollbar">
    <div class="px-3 py-2">
      <p>
        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
        in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
      </p>
      <b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
    </div>
  </b-sidebar>
  
  <p v-for="i in 10">Some content</p>
  <b-button v-b-toggle.sidebar-1>Toggle Sidebar</b-button>
  <p v-for="i in 10">Some content</p>
</div>