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

//監聽滾動事件
　　　　　　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 相對文檔的水平座標+垂直方向滾動的量