Vuejs의 window.scrollY 변경 내용을 확인합니다.

Vuejs의 window.scrollY 변경 내용을 확인합니다.

앱이 두 컴포넌트로 .이 앱은 2개의 컴포넌트로 구성되어 있습니다.App.vue 또 구성 요소인 '아까보다'는Home.vue앱 구조의 나머지 부분: 스틱 헤더와 스크롤할 수 있는 앵커가 있는 섹션.

페이지가 스크롤되는 동안 로고를 최소화하기 위해 스틱 헤더에 클래스를 적용하고 싶습니다.으로 어떤 했습니다.window.scrollY 만약 ★★★★★★★★★★★★★★★★★★★★★.scrollY0으로 하다로고를 최소화하는 클래스를 적용합니다.

컴포넌트에서 스크롤 이벤트를 들으려고 했지만 그리 멀리 가지 않았습니다.이 설명에서는 매우 좋은 솔루션이 제공되지만 스크롤 이벤트를 어디에 배치해야 할지 모르겠습니다.https://github.com/vuejs/Discussion/issues/324

는 데이터이 가장 했습니다.window.scrollY값을 계산한 다음 값의 변화를 관찰합니다.유감스럽게도 워처는 트리거되지 않습니다.그래서 난 갇혔어.을 사용하다

data () {
return {
  ...
  windowTop: window.top.scrollY
 }
}
...
watch: {
 windowTop: {
  immediate: true,
  handler (newVal, oldVal) {
    console.log(newVal, oldVal);
  },
 }
}

내가 뭘 잘못하고 있는지 짐작 가는 거라도?

window그런 식으로 반응적으로 사용할 수 없습니다.대신 '어,어,어,어,어,어,어,어,어,어,어,어,어,어,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아.window의 »scroll"CHANGE: "CHANGE:

mounted() {
  window.addEventListener("scroll", this.onScroll)
},
beforeDestroy() {
  window.removeEventListener("scroll", this.onScroll)
},
methods: {
  onScroll(e) {
    this.windowTop = window.top.scrollY /* or: e.target.documentElement.scrollTop */
  }
}

나에게는 위의 어느 것도 통하지 않았다.

하지 안 되었다true스크롤 리스너 추가/삭제에서 세 번째 파라미터로 지정합니다.

mounted() {
  window.addEventListener("scroll", this.onScroll, true)
},
beforeDestroy() {
  window.removeEventListener("scroll", this.onScroll, true)
},
methods: {
  onScroll(e) {
    this.windowTop = e.target.scrollTop;
  }
}

세 번째 파라미터:세 번째 매개변수가 true인 문서 수준 리스너를 첨부하여 모든 구성요소에서 스크롤 이벤트를 캡처할 수 있습니다.다음은 예를 제시하겠습니다.

document.addEventListener('scroll', function(e){ }, true);

마지막은 중요한 부분이며, 변경, 포커스 및 스크롤과 같이 이벤트가 정상적으로 버블하지 않더라도 디스패치 시 이벤트를 캡처하도록 브라우저에 지시합니다.

2020 갱신일 :

@scroll.passive컴포넌트에 포함된 요소의 스크롤을 보려면:

예:

템플릿

<div class="room_message-stream" @scroll.passive="handleScroll">
      <ul class="room_message-stream__list">
        <li class="room_message-stream__list-item">...</li>
      </ul>
</div>

방법:

handleScroll (e) {
  var scrollPos = e.target.scrollTop
}

.mounted()다음과 같이 이벤트청취자를 창 객체에 추가합니다.

var p = new Vue({
   el: "#app",
   data(){
      return {
          windowTop: 0
      };
   },
   mounted()
   {
       var that = this;
       window.addEventListener("scroll", function(){
           that.windowTop = window.scrollY;
       });
   },
   template: "<div style='height: 250vh'><div style='position: fixed; right: 0; top: 0'>{{windowTop}}</div></div>"
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

임의의 컴포넌트에서 윈도우 스크롤 위치를 얻기 위해 변수 또는 함수를 호출해야 하는 작업을 수행하려고 했습니다.그러기 위해서는 믹스인을 사용합니다.여기 제 코드가 있습니다.저는 nuxt를 쓰고 있어요.

플러그인 내부에 파일을 만듭니다(예: scroll-position.js).

import Vue from 'vue'

Vue.mixin({
    data() {
        return {
            scrollPosition: window.scrollY
        }
    },
    methods: {
        get_scroll_position() {
            window.addEventListener('scroll', () => {
                this.scrollPosition = window.scrollY;
            });
            return this.scrollPosition
        }
    }
})

nuxt.config.js의 경우

plugins:['@/plugins/scroll-position.js']

get_scroll_position()을 원하는 컴포넌트에 사용할 수 있습니다.

:class="{'header_sticky':get_scroll_position()>=80}"

언급URL : https://stackoverflow.com/questions/55391472/watch-window-scrolly-changes-in-vuejs