I have an app created with vuetify and i want to hide the main scrollbar when my dialog is open. For example, there is two scrollbar when the dialog is open: https://i.stack.imgur.com/a4xt7.png

I just want to hide the main scrollbar only when the dialog is open. This is what I have tried :

document.body.style.overflow = "hidden";

but it doesn't work.

Here is where the code being implemented :

async mounted() {
    this.$store.commit("SET_LOADING", true);
    try {
      await this.loadData();
      if (!this.item) {
        this.$showDialog({
          title: "Something Wrong",
          body: `Member not found!`,
        });
        this.closePage();
      } else {

        // here
        document.body.style.overflow = "hidden";
        await this.$store.dispatch("area/get");
        this.role = this.item?.roles[0];
        if (
          this.item?.user &&
          this.$store.state.user?.roles?.find(
            (x) => x == this.$roles.Admin
          )
        )
          this.email = this.item?.user.email;
      }
    } catch (error) {
      Promise.reject(error);
    } finally {
      this.$store.commit("SET_LOADING", false);
    }
  },