最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

  全部應(yīng)用
  
   {{ item.name }}
  

  

需要說明的數(shù)據(jù)：activeMenu-當(dāng)前導(dǎo)航序號，scrollBox-需要在里面滾動的元素即設(shè)為overflow-y:scroll的父元素div

2、點(diǎn)擊導(dǎo)航平滑滾動的方法：jump(index)

// 跳轉(zhuǎn)
 jump(index) {
  this.activeMenu = index // 當(dāng)前導(dǎo)航
  const jump = jQuery('.do-jump').eq(index)
  const scrollTop = jump.position().top + this.scrollBox.scrollTop // 獲取需要滾動的距離
  // Chrome
  this.scrollBox.scrollTo({
  top: scrollTop,
  behavior: 'smooth' // 平滑滾動
  })
 }

這里有兩點(diǎn)需要說明：一是因?yàn)槲襳ue項(xiàng)目里裝了jquery所以這里直接用了jquery的position().top來獲取元素到父元素的距離，如果項(xiàng)目里沒裝jquery需要把這里換成js的方法來獲取元素到父元素的距離（萬事有Google和度娘），二是點(diǎn)擊之后需要滾動的距離計算時別忘了加上當(dāng)前div已經(jīng)滾動的距離即已經(jīng)被卷起的高度

-----到這里我們就可以實(shí)現(xiàn)1的功能

3、監(jiān)聽scrollBox的滾動：

寫在mounted里

// 獲取滾動dom元素
 this.scrollBox = document.getElementById('scrollBox')
 const jump = jQuery('.do-jump')
 const topArr = []
 for (let i = 0; i < jump.length; i++) {
  topArr.push(jump.eq(i).position().top)
 }
 // 監(jiān)聽dom元素的scroll事件
 this.scrollBox.addEventListener('scroll', () => {
  const current_offset_top = that.scrollBox.scrollTop
  for (let i = 0; i < topArr.length; i++) {
  if (current_offset_top <= topArr[i]) { // 根據(jù)滾動距離判斷應(yīng)該滾動到第幾個導(dǎo)航的位置
   that.activeMenu = i
   break
  }
  }
 }, true)

這里需要注意addEventListener里有三個參數(shù)：'scroll' 、function、true

以上是“vue+導(dǎo)航錨點(diǎn)聯(lián)動-滾動監(jiān)聽和點(diǎn)擊平滑滾動跳轉(zhuǎn)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。