@Ibishka

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

<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>


Но увы кнопка всегда видна. Что неправильно делаю?
  • Вопрос задан
  • 80 просмотров
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега JavaScript
не корректно работает

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

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

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

data: () => ({
  scroll: 0,
}),
methods: {
  onScroll() {
    this.scroll = document.body.scrollTop;
  },
},
created() {
  document.body.addEventListener('scroll', this.onScroll);
},
beforeDestroy() {
  document.body.removeEventListener('scroll', this.onScroll);
},

<button :class="здесь смотрите значение scroll, назначаете нужные классы"></button>

https://jsfiddle.net/7bhp08mL/
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы