1. 程式人生 > >vue實現監聽滾動條

vue實現監聽滾動條

其實你百度了一下基本都是

 mounted() {
        window.addEventListener('scroll', this.handleScroll)
 },
 methods: {
        handleScroll() {
            console.log('a')
        }
 }

如何你複製過去基本不會呼叫handleScroll函式,其實這樣寫是沒有錯的。但是你要在後面第三個引數加上true,能成功監聽。

 mounted() {
        window.addEventListener('scroll', this.handleScroll, true)
 },
 methods: {
        handleScroll() {
            console.log('a')
        }
 }

上面這樣寫了之後 是可以獲取scroll事件但是獲取scroll都是0,最後百度了全部都是說什麼  是DTD的問題 我也嘗試了沒有什麼用

mounted() {
   document.getElementById('orderFullScreen').addEventListener('scroll', this.handleScroll)
},
methods: {
    // 獲取滾動條高度
    handleScroll() {
        console.log(document.getElementById('orderFullScreen').scrollTop)
    },
}

相關推薦

vue實現滾動

其實你百度了一下基本都是 mounted() { window.addEventListener('scroll', this.handleScroll) }, methods: { handleScroll() {

vue 純js滾動到底部

在網頁中,我們會遇到很多在滾動條到底部的時候有資料正在載入的事件,那麼怎樣用vue去實現這樣的內容呢?本篇只給出一個雛形,結合vue的生命週期用純javascript寫的一個監聽函式,後續操作資料庫的部分暫且不議。1、怎樣用純js判斷滾動條是否到底部?    先了解幾個關鍵詞

vue移動端滾動高度的方法

這兩天做移動端專案遇到的問題,就是當滾動條下拉到一定的高度的時候,讓某個東西固定定位到頂部首先做的如何監聽滾動條的高度,下面是我寫的方法var _this =this window.addEventListener('scroll',function(){ var scrol

小程序滾動

col 滾動條 class span 滾動 color function data style 1 //監控滾動條 2 scroll: function(e){ 3 this.setData({ 4 scrollTop: e.detai

jQuery 滾動位置

滾動條事件 // 實時監聽元素的滾動事件 $(window).scroll(function(){ ... }); $(window).scrollLefft(); // 獲取滾動條位置 $(window).scrollTop(); $(window).scrollTop(200); //

js和jquery滾動事件

網上查了一下,找到兩種js監聽滾輪事件的方法 (1)window.onscroll = function() {}  (2)document.addEventListener("onscroll",

滾動到底部事件響應

直接拿一個頁面過來說問題,好桑心獲取節點困了好久,然而只想簡簡單單用這篇文章來記錄滾動條滾到底部觸發事件 @inject('blogAttentionStore') @observer export default class ShareToMe extends React.Componen

js滾動滾動 改變元素

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width

js滾動

//scrolltop垂直滾動條位置//onscroll 事件在元素滾動條在滾動時觸發。var scrolltop=null; window.onscroll=function(e){ var e=e; scrolltop=document.documentElement.scrollT

分享一下我剛剛寫的一個基於VUE滾動事件固定導航選單的方法

本人最近一直在研究VUE這個框架,剛剛遇到一個需要使用固定導航選單的地方,現在寫出來分享給大家,其實也會有很多種解決方案,效能上如何更高效也是見仁見智了,話不多說,直接上程式碼首先,在export default裡我使用了window.addEventListener來監聽s

js滾動向上還是向下

今天有個小夥伴問我 我就嘗試寫了下  直接看程式碼 順便記住方便以後使用 <script type="text/javascript">       var scrollFunc = f

js滾動事件和獲取瀏覽器及螢幕高度和寬度等資訊的方法

<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-sc

Vue滾動事件

背景 最近在做提分加的預覽頁面時,有一個用於實現錨點定位的側邊欄導航,而在頁面滾動時,側邊導航也需要隨著頁面的滾動而啟用相應的模組,這就需要監聽頁面的滾動事件了。 解決 監聽滾動事件

吸頂動畫 側邊欄 滾動位置 元素距離頂部高度

需求:當頁面中某一標籤到達頁面頂部時,固定在頁面上,否則隨頁面一起滾動,看下邊效果圖。 實現思路: 1.監聽滾動條移動事件。 2.獲取標籤距離頂部距離。 3.當滾動條滾動距離大於標籤距離頂部距離時,固定標籤在某一位置。 具體步驟: 1.首先監聽滾動條事件 window.addEventListener("

vue滾動事件 實現動態錨點

title 復制代碼 嘗試 理念 元素 滾動 功能 time 滿足 前幾天做項目的時候,需要實現一個動態錨點的效果 如果是傳統項目,這個效果就非常簡單。但是放到 Vue 中,就有兩大難題: 1. 在沒有 jQuery 的 animate() 方法的情況下,如何實現平滑滾動

vue滾動事件 實現某元素吸頂或者固定位置顯示

最近寫了一個VUE的web app專案,需要實現某個部位吸頂的效果。即,頁面往上滑動,剛好到達該部位時,該部分,固定在頂部顯示。 1、監聽滾動事件 利用VUE寫一個在控制檯列印當前的scrollTop, 首先,在mounted鉤子中給window新增一個滾動滾

Vue 事件實現導航欄吸頂效果(頁面滾動後定位)

所說的吸頂效果就是在頁面沒有滑動之前,導航欄的效果如下圖所示:當頁面向上滑動之後,導航欄始終固定在頁面的上方。具體程式碼:寫入事件監聽,監聽滾動條。mounted () { // 事件監聽滾動條 window.addEventListener('scroll', this.watchS

vue移動端實現返回主頁滾動在上次瀏覽的位置

這幾天因為這個問題,絞盡腦汁啊。 我的專案是【 div元素內部的滾動條滾動,而不是body 】,所以解決這個問題,首先必須清楚自己的專案滾動條到底是誰的!!!! 話不多說,程式碼送上。 一:  首先為需要保留滾動條的元件開啟快取 export default ne

VUE】在vue中使用@scroll滾動事件,@scroll無效問題解決!

在網上看了一下vue中監聽滾動條滾動事件,清一色的使用document.addEventListener('scroll',function(){})我是在做滾動條滑到底部時,自動載入更多的時候有這個需求。我認為使用document.addEventListener會破壞vu

react 移動端 滾動事件 獲取滾動距頂部距離

嘗試了很多中方法,用下面程式碼實現了 componentDidMount(){ window.addEventListener('scroll', this.handleScroll); } handleScroll(){ cons