Почему не корректно работает проверка скролла body?

Question

[Ibishka]

<template>
  <div :class="{ 'full-height': checkRouteName }" id="app">
    <header class="header">
      <div class="container">
        <div class="header__row">
          <router-link to="/">
            <img src="@/assets/img/logo.svg" alt="Triangle" />
          </router-link>
          <nav class="menu">
            <li class="menu__item">
              <router-link to="/" class="menu__link" active-class="active" exact
                >Home</router-link
              >
            </li>
            <li class="menu__item">
              <router-link to="/news" class="menu__link" active-class="active"
                >News</router-link
              >
            </li>
            <li class="menu__item">
              <router-link to="/bands" class="menu__link" active-class="active"
                >Bands</router-link
              >
            </li>
            <li class="menu__item">
              <router-link to="/media" class="menu__link" active-class="active"
                >Media</router-link
              >
            </li>
          </nav>
          <button class="hamburger"></button>
        </div>
      </div>
    </header>
    <router-view />
    <button
      class="scroll"
      :class="{ visible: checkScroll }"
      id="scroll"
    ></button>
  </div>
</template>
<script>
export default {
  methods: {
    checkScroll() {
      return document.body.scrollTop > 0;
    }
  },
  computed: {
    checkRouteName() {
      return this.$route.name == "Home";
    }
  }
};
</script>

Но увы, кнопка всегда видна. Что неправильно делаю?

Comments

[Алексей Ярков]

Проверку нам самим написать?

[Ibishka]

Алексей Ярков, Забыл вставить.

Answer 1

[0xD34F]

не корректно работает

Слово "корректно" тут лишнее. Вообще ни хрена не работает.

Проверка у вас в методе, а методы - знаю, для вас прозвучит весьма неожиданно - их надо вызывать. Чего вы не делаете. Но, разумеется, добавление круглых скобок вам не сильно поможет - вызов будет происходить только при рендеринге, а он со скроллом не связан.

Правильно будет так: добавить свойство, хранящее текущий скролл; обновлять его по событию скролла (нужно повесить соответствующий обработчик на прокручиваемый элемент); назначать классы или чего там вам надо в зависимости от значения этого свойства:

data: () => ({
  scroll: 0,
}),
computed: {
  buttonClass() {
    return что-то, зависящее от значения this.scroll;
  },
},
created() {
  const { body } = document;
  const onScroll = () => this.scroll = body.scrollTop;
  body.addEventListener('scroll', onScroll);
  this.$on('hook:beforeDestroy', () => body.removeEventListener('scroll', onScroll));
},

<button :class="buttonClass"></button>

https://jsfiddle.net/kLwhbec5/