2. 程式人生 > >vue 監聽滑動事件，是否滑動到dom元素的區域

vue 監聽滑動事件，是否滑動到dom元素的區域

阿新 • • 發佈：2018-12-14

//監聽滾動事件
　　　　　　window.addEventListener('scroll',that.handleScroll)

//垂直滾動的值相容問題
let scrollTopE = window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop

 //offsetTop 屬性物件距離父座標的頂端的top值，offsetHeight物件本身的高度

//判斷的條件 元素的距離高度的

if((bannerTop-screenHeight)<scrollTopE && scrollTopE<(bannerTop+bannerHeight+111))

 

 

topShow class名增加顯示

 

<div class="page page11" :class="{topShow:topShow}" ref="bannerImg">
     <div class="layered">
    </div>
</div>

export default{
　　data(){
　　　　return{

　　　　　　topShow:false,

　　　　}

　　}

　　mounted:function(){
　　　　let that = this;
　　　　that.$nextTick(function(){

　　//監聽滾動事件
　　　　　　window.addEventListener('scroll',that.handleScroll)
　　　　})

　　},

　　methods:{

　　　　handleScroll () {
　　　　　　let that = this;
　　　　　　//垂直滾動的值相容問題
　　　　　　let scrollTopE = window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop
　　　　　　//offsetTop 屬性指定的父座標的計算頂端位置 offsetHeight獲取物件的高度
　　　　　　let bannerTop = this.$refs.bannerImg.offsetTop
　　　　　　let bannerHeight = this.$refs.bannerImg.offsetHeight
　　　　　　//螢幕的高度　　　　　

　　　　　　let screenHeight = window.screen.availHeight
　　　　　　// console.log((bannerTop-screenHeight)<scrollTopE && scrollTopE<(bannerTop+bannerHeight))
　　　　　　// console.log((bannerTop-screenHeight)<scrollTopE)
　　　　　　// console.log(scrollTopE<(bannerTop+bannerHeight))
　　　　　　// console.log(bannerTop+bannerHeight)
　　　　　　// console.log("scrollTopE:"+scrollTopE+";bannerTop"+bannerTop+";bannerHeight"+bannerHeight+";screenHeight"+screenHeight)

　　　　　　//判斷是否滾動到操作簡便的區域範圍內

　　　　　　if((bannerTop-screenHeight)>scrollTopE && scrollTopE<(bannerTop+bannerHeight)){
　　　　　　　　that.topShow = true;
　　　　　　}else{
　　　　　　　　that.topShow = false;
　　　　　　}

　　　　}

},

 

每次寫滾動事件，我就要查這些屬性

  1. document.body.clientWidth ==> BODY物件寬度  
  2. document.body.clientHeight ==> BODY物件高度  
  3. document.documentElement.clientWidth ==> 可見區域寬度  
  4. document.documentElement.clientHeight ==> 可見區域高度  
  5.   
  6. 網頁可見區域寬： document.body.clientWidth  
  7. 網頁可見區域高： document.body.clientHeight  
  8. 網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)  
  9. 網頁可見區域高： document.body.offsetHeight (包括邊線的高)  
  10. 網頁正文全文寬： document.body.scrollWidth  
  11. 網頁正文全文高： document.body.scrollHeight  
  12. 網頁被捲去的高： document.body.scrollTop  
  13. 網頁被捲去的左： document.body.scrollLeft  
  14. 網頁正文部分上： window.screenTop  
  15. 網頁正文部分左： window.screenLeft  
  16. 螢幕解析度的高： window.screen.height  
  17. 螢幕解析度的寬： window.screen.width  
  18. 螢幕可用工作區高度： window.screen.availHeight  
  19. 螢幕可用工作區寬度： window.screen.availWidth  
  20.   
  21. // 部分jQuery函式  
  22. $(window).height() 　//瀏覽器時下視窗可視區域高度   
  23. $(document).height()　　　　//瀏覽器時下視窗文件的高度   
  24. $(document.body).height()　　　　　　//瀏覽器時下視窗文件body的高度   
  25. $(document.body).outerHeight(true)　//瀏覽器時下視窗文件body的總高度 包括border padding margin   
  26. $(window).width() 　//瀏覽器時下視窗可視區域寬度   
  27. $(document).width()//瀏覽器時下視窗文件對於象寬度   
  28. $(document.body).width()　　　　　　//瀏覽器時下視窗文件body的高度   
  29. $(document.body).outerWidth(true)　//瀏覽器時下視窗文件body的總寬度 包括border padding  
  30.   
  31. HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth   
  32. scrollHeight: 獲取物件的滾動高度。   
  33. scrollLeft:設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離   
  34. scrollTop:設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離   
  35. scrollWidth:獲取物件的滾動寬度   
  36. offsetHeight:獲取物件相對於版面或由父座標 offsetParent 屬性指定的父座標的高度   
  37. offsetLeft:獲取物件相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置   
  38. offsetTop:獲取物件相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置   
  39. event.clientX 相對文件的水平座標   
  40. event.clientY 相對文件的垂直座標   
  41. event.offsetX 相對容器的水平座標   
  42. event.offsetY 相對容器的垂直座標   
  43. document.documentElement.scrollTop 垂直方向滾動的值   
  44. event.clientX+document.documentElement.scrollTop 相對文件的水平座標+垂直方向滾動的量  
 
  1. document.body.clientWidth ==> BODY物件寬度  
  2. document.body.clientHeight ==> BODY物件高度  
  3. document.documentElement.clientWidth ==> 可見區域寬度  
  4. document.documentElement.clientHeight ==> 可見區域高度  
  5.   
  6. 網頁可見區域寬： document.body.clientWidth  
  7. 網頁可見區域高： document.body.clientHeight  
  8. 網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)  
  9. 網頁可見區域高： document.body.offsetHeight (包括邊線的高)  
  10. 網頁正文全文寬： document.body.scrollWidth  
  11. 網頁正文全文高： document.body.scrollHeight  
  12. 網頁被捲去的高： document.body.scrollTop  
  13. 網頁被捲去的左： document.body.scrollLeft  
  14. 網頁正文部分上： window.screenTop  
  15. 網頁正文部分左： window.screenLeft  
  16. 螢幕解析度的高： window.screen.height  
  17. 螢幕解析度的寬： window.screen.width  
  18. 螢幕可用工作區高度： window.screen.availHeight  
  19. 螢幕可用工作區寬度： window.screen.availWidth  
  20.   
  21. // 部分jQuery函式  
  22. $(window).height() 　//瀏覽器時下視窗可視區域高度   
  23. $(document).height()　　　　//瀏覽器時下視窗文件的高度   
  24. $(document.body).height()　　　　　　//瀏覽器時下視窗文件body的高度   
  25. $(document.body).outerHeight(true)　//瀏覽器時下視窗文件body的總高度 包括border padding margin   
  26. $(window).width() 　//瀏覽器時下視窗可視區域寬度   
  27. $(document).width()//瀏覽器時下視窗文件對於象寬度   
  28. $(document.body).width()　　　　　　//瀏覽器時下視窗文件body的高度   
  29. $(document.body).outerWidth(true)　//瀏覽器時下視窗文件body的總寬度 包括border padding  
  30.   
  31. HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth   
  32. scrollHeight: 獲取物件的滾動高度。   
  33. scrollLeft:設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離   
  34. scrollTop:設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離   
  35. scrollWidth:獲取物件的滾動寬度   
  36. offsetHeight:獲取物件相對於版面或由父座標 offsetParent 屬性指定的父座標的高度   
  37. offsetLeft:獲取物件相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置   
  38. offsetTop:獲取物件相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置   
  39. event.clientX 相對文件的水平座標   
  40. event.clientY 相對文件的垂直座標   
  41. event.offsetX 相對容器的水平座標   
  42. event.offsetY 相對容器的垂直座標   
  43. document.documentElement.scrollTop 垂直方向滾動的值   
  44. event.clientX+document.documentElement.scrollTop 相對文件的水平座標+垂直方向滾動的量  
 

相關推薦

vue 監聽滑動事件，是否滑動到dom元素的區域

//監聽滾動事件　　　　　　window.addEventListener('scroll',that.handleScroll) //垂直滾動的值相容問題 let scrollTopE = window.pageYOffset || document.documentElement.scrollTop |

【VUE】在vue中使用@scroll監聽滾動事件，@scroll無效問題解決！

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

vue中使用element-ui監聽鍵盤事件，input只能輸入純數字

1.element-ui的input監聽事件   vue中element-ui在使用el-input的時候，由於el-input在輸入框的外層添加了一層的<div class="el-input"></div>，把input隱藏在子級，所以el-input新增上

vue監聽滾動事件 實現動態錨點

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

Vue-- 監聽路由變化，數據無法更新？

響應 被調用 數據驅動 後來 實例 無法 誤區 .com 來看 　　之前寫的Vue項目，有個問題困擾了好久。新聞板塊有推薦、精華、最新等幾個Tab，設想通過切換Tab，改變路由參數（get/news/:tab）去獲取對應數據，然後渲染到頁面（用的是同一套組件），問題來了：當

Python pygame，事件，監聽使用者事件，pygame.event.get()

demo.py（事件，監聽事件）： import pygame pygame.init() # 初始化所有pygame模組 # 建立遊戲主視窗 480 * 700 screen = pygame.display.set_mode((480, 700)) # 建立

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

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

vue 監聽路由變化，dom載入完成後執行程式碼

watch 監聽路由變化，且dom渲染完成後執行函式 專案中在頁面中用到了footer，為了在頁面內容不超過螢幕高度時將footer定位置底，超過螢幕高度時不做定位，正常在內容最底部顯示，運用瞭如下方式問題：若不在dom渲染後執行，獲取的高度是不正確的.   watch: {

JavaScript監聽鍵盤事件，組合鍵事件

監聽鍵盤事件，比如說提交表單或者確認通過鍵盤操作會很方便，有時候需要組合鍵比如複製貼上等。基本原理是當按下某一個鍵時，返回對應的值，然後再判斷使用者按下了哪個鍵，進行對比。 一、鍵盤監聽是直接在整個頁面文件上進行監聽的，也就是document上，以下是原生的使

Fragment中監聽onKey事件，沒你想象的那麼難。

專案中越來越多的用到Fragment，在用Fragment取代TabHost的時候遇到了一個問題，我們都知道，TabHost的Tab為Activity例項，有OnKey事件，但是Fragment中沒有，但是又必須監聽OnKey事件怎麼辦（不僅僅是退出哦）,如果僅僅是退出我們可以在Activity中進行統一處

Html5滑動事件，用於滑動分頁

$(document).scroll(function () { var scrollTop = $(this).scrollTop(); //滑過的

tornadofx監聽滑鼠事件，用滑鼠畫點

import javafx.collections.FXCollections import javafx.scene.

pan手勢監聽對view的上下左右滑動，利用關聯物件在block中觸發view的點選事件（附手勢大全）

內容目錄： 在block中觸發view的點選事件 利用pan手勢，監聽對view的上下左右滑動 各種手勢的簡單實現 解決手勢衝突 一、在block中觸發view的點選事件 首先建立一個UIView的分類，下面是標頭檔案中

vue的.native 修飾 ，解決iview中input 無法監聽enter事件

有時候，你可能想在某個元件的根元素上監聽一個原生事件。可以使用 .native 修飾 v-on 。例如：直接寫成下面這樣enter事件將無效<Input type="password" v-mod

vue 監聽 input 回車事件

pla vue 有效 arc mod ram 修飾符 沒有效果 mode <el-input size="small" placeholder="搜索..." v-model="searchParam.quick_query" @keyup.13="enter"&g

監聽瀏覽器返回，pushState，popstate 事件，window.history對象

當前 rep www 簡單介紹 itl 成了 stat 直接 clas 在WebApp或瀏覽器中，會有點擊返回、後退、上一頁等按鈕實現自己的關閉頁面、調整到指定頁面、確認離開頁面或執行一些其它操作的需求。可以使用 popstate 事件進行監聽返回、後退、上一頁操作。 一、

vue監聽input，如果不輸入正整數，顯示0

參考大佬寫的，主要邏輯如下，繫結input監控事件，判斷正則輸入，如果不滿足，用setTimeout延遲修改值為0 程式碼如下： <el-input placeholder="請輸入內容" v-model="searcher" v-on:input="searchValue"

vue中使用element-ui監聽鍵盤事件

  vue中element-ui在使用el-input的時候，由於el-input在輸入框的外層添加了一層的<div class="el-input"></div>，把input隱藏在子級，所以el-input新增上了keyup無響應； <el

vue監聽document的scroll事件

當前遇到了一個這樣的業務場景： 當頁面滾動距離大於指定距離，顯示回到頂部的按鈕，否則隱藏按鈕； 專案構成：vue-cli + axios 要求：不使用jQuery,使用原生完成這個元件。 首先：MDN中對scroll事件的定義，可以發現其中的關鍵點element

vue專案如何監聽視窗變化，達到頁面自適應？

【自適應】向來是前端工程師需要解決的一大問題——即便作為當今非常火熱的vue框架，也無法擺脫——雖然elementui、iview等開源UI元件庫層出不窮，但官方庫畢竟不可能滿足全部需求，因此我們可以通過【監聽視窗變化】達到想要的絕大部分自適應效果。 獲取視窗寬度：document.body.clientW