집 >웹 프론트엔드 >JS 튜토리얼 >Vue가 스크롤 이벤트를 수신하고 상단 또는 고정 위치에 요소를 표시하는 방법에 대한 자세한 설명

Vue가 스크롤 이벤트를 수신하고 상단 또는 고정 위치에 요소를 표시하는 방법에 대한 자세한 설명

小云云원래의: 2018-05-10 16:48:579242검색

이 글은 주로 Vue의 특정 요소의 천장 또는 고정 위치 표시 구현과 스크롤 이벤트 모니터링에 대해 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.

저는 최근 특정 부분의 천장 효과를 달성해야 하는 VUE 웹 앱 프로젝트를 작성했습니다. 즉, 페이지가 위로 슬라이드되어 이 부분에 이르면 이 부분이 고정되어 상단에 표시됩니다.

1. 스크롤 이벤트를 수신합니다.
VUE를 사용하여 콘솔에 현재 스크롤 톱을 인쇄합니다. 먼저, 마운트된 후크의 창에 스크롤 수신 이벤트를 추가합니다.

mounted () {
 window.addEventListener(&#39;scroll&#39;, this.handleScroll)
},

그런 다음 메소드에서 이 handlerScroll 메서드를 추가하세요.

handleScroll () {
 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 console.log(scrollTop)
},

콘솔 인쇄 결과:

2. 요소에서 상단까지의 거리를 모니터링하고 스크롤 거리가 요소에서 상단까지의 거리보다 큰지 확인하고 searchBar를 true로 설정합니다. , 그렇지 않으면 false입니다

handleScroll () {
 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 var offsetTop = document.querySelector(&#39;#searchBar&#39;).offsetTop
 if (scrollTop > offsetTop) {
 this.searchBarFixed = true
 } else {
 this.searchBarFixed = false
 }
},

Write first 요소를 맨 위에 고정하는 스타일 isFixed(적은 쓰기)

.searchBar{
 .isFixed{
 position:fixed;
 background-color:#Fff;
 top:0;
 z-index:999;
 }
 ul {
 WIDTH:100%;
 height: 40px;
 line-height: 40px;
 display: flex;
 li {
  font-size: 0.8rem;
  text-align: center;
  flex: 1;
  i {
  font-size: 0.9rem;
  padding-left: 5px;
  color: #ccc;
  }
 }
 border-bottom: 1px solid #ddd;
 }
}

그런 다음 고정해야 하는 요소의 클래스를 searchBar에 바인딩합니다. isFixed 스타일

<p class="searchBar" id="searchBar">
 <ul :class="searchBarFixed == true ? &#39;isFixed&#39; :&#39;&#39;">
 <li>区域<i class="iconfont icon-jiantouxia"></i></li>
 <li>价格<i class="iconfont icon-jiantouxia"></i></li>
 <li>房型<i class="iconfont icon-jiantouxia"></i></li>
 <li>更多<i class="iconfont icon-jiantouxia"></i></li>
 </ul>
</p>

수정된 결과:

이 페이지를 떠나면 모니터링되는 이 이벤트를 제거해야 합니다. 그렇지 않으면 오류가 보고됩니다.

destroyed () {
 window.removeEventListener(&#39;scroll&#39;, this.handleScroll)
},

Vue가 스크롤 이벤트를 수신하고 상단 또는 고정 위치에 요소를 표시하는 방법에 대한 자세한 설명

관련 기사