1. 程式人生 > 其它 >H5中列表滾動之後分類條的吸頂回顯

H5中列表滾動之後分類條的吸頂回顯

例如城市名稱為一行按鈕,點選按鈕修改頁面列表內容,發生滾動之後,列表吸頂,再次點選按鈕,回顯到最頂的可吸頂位置

步驟以下

//1.取城市列表距頂部距離 this.scrollTop=Math.ceil(this.$refs.topRef.getBoundingClientRect().top);//topRef為dom物件的ref //2.mounted滾動條的獲取 window.addEventListener("scroll",this.handleScrollx,true); //3.取城市列表的滾動距離(mounted中開啟滾動監控) handleScrollx(){ //判斷是否需要滾動,只有在滾動條在吸頂出來後菜需要滾動到指定位置
if(window.pageYOffset>=this.scrollTop){ this.showScrollTo=true; } if(window.pageYOffset<this.scrollTop){ this.showScrollTo=false; } }, //4.點選事件滾動到指定的位置 this.scrollTo(); //5.點選城市列表/如果城市列表吸頂了,則重置城市的滾動距離 scrollTo(){ if(!this.showScrollTo)return; document.documentElement.scrollTop=this.scrollTop;
},