vue 点击元素滚动到指定位置（滑动到指定位置对应标签自动选中）

一：各个模块不相同情况

1、内容部分

<div class="anchor">
 
<div v-for="(item,index) in anchors" :class="anchorIndex==index ? 'item selected':'item'"

     @click="anchorClick(index)">
     <a :href="'#'+index">{{item}}</a>
     </div>
</div>
2、锚点部分

anchorClick(index) {
  console.info(index)
  this.anchorIndex = index
},
3、滚动条事件监听（必须写在watch()或者mounted()里）

window.addEventListener('scroll',this.handleScroll,true)
4、根据高度自动选中对应的标签

handleScroll(){
  let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
  console.info(scrollTop)
  if(scrollTop > 600 && scrollTop < 800){
    this.anchorIndex = 1
  }
  if(scrollTop > 800){
    this.anchorIndex = 2
  }
  if(scrollTop < 600){
    this.anchorIndex = 0
  }

},
二、各个模块都相同（转自本溢）

<template>

  <div>

    <div class="div">

      <ul class="navgator">

        <li class="navgatorLi" :class="{'isActive': index===navgatorIndex}" @click="handleLeft(index)" v-for="(item,index) in navgator" :key="item">{{item}}</li>

      </ul>

      <ul class="rightList">

        <li :id="'id'+index" v-for="(item,index) in listBox" :key="item">{{item}}</li>

      </ul>

    </div>

  </div>

</template>

<script>

  export default {

  data() {

    return {

      navgator: [

        '列表A',

        '列表B',

        '列表C',

        '列表D',

      ],

      navgatorIndex: 0,

      listBox: [

        'A','B','C','D'

      ],

      listBoxState: true,//点击导航栏时，暂时停止监听页面滚动

    };

  },

  created() {

  },

  mounted() {

    let timeId;

    window.addEventListener('scroll', () => {

      // 页面滚动停止100毫秒后才会执行下面的函数。

      clearTimeout(timeId);

      timeId = setTimeout(() => {

        this.scrollToTop();

        console.log('执行完了哦');

      }, 100);

    } , true);

  },

  methods: {

    // 点击导航菜单，页面滚动到指定位置

    handleLeft(index) {

      this.navgatorIndex = index;

      this.$el.querySelector(`#id${index}`).scrollIntoView({

        behavior: "smooth",  // 平滑过渡

        block:    "start"  // 上边框与视窗顶部平齐。默认值

      });

      this.listBoxState=false;

      let timeId;

      clearTimeout(timeId);

      timeId = setTimeout(() => {

        this.listBoxState=true;

      },200);

    },

    // 监听页面元素滚动，改变导航栏选中

    scrollToTop() {

      // 获取视窗高度

      var domHight = document.body.offsetHeight;

      // dom滚动位置

      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

      if (this.listBoxState) {//作用是点击导航栏时，延迟这里执行。

        this.listBox.map((v,i) => {

          // 获取监听元素距离视窗顶部距离

          var offsetTop = document.getElementById(`id${i}`).offsetTop;

          // 获取监听元素本身高度

          var scrollHeight = document.getElementById(`id${i}`).scrollHeight;

          // 如果 dom滚动位置 >= 元素距离视窗距离 && dom滚动位置 <= 元素距离视窗距离+元素本身高度

          // 则表示页面已经滚动到可视区了。

          if (scrollTop >= offsetTop && scrollTop<=(offsetTop+scrollHeight)) {

            // 导航栏背景色选中

            this.navgatorIndex = i;

          }

        })

      }

    },

  },

}

</script>

<style lang='less' scoped>

  .div {

    width: 100%;

    background: #ededed;

  }

  .navgator {

    width: 200px;

    position: fixed;

    top: 0;

    .navgatorLi {

      width: 100%;

      height: 1rem;

      display: flex;

      justify-content: center;

      align-items: center;

      border: 1px solid #ccc;

      border-top: none;

    }

    .isActive {

      color: #fff;

      background: darkseagreen;

    }

  }

  .rightList {

    width: 560px;

    margin-left : 200px;

    li {

      width: 100%;

      height: 10rem;

      display: flex;

      justify-content: center;

      align-items: center;

      border: 1px solid #ccc;

    }

  }

</style>

巴特西

vue 点击元素滚动到指定位置（滑动到指定位置对应标签自动选中）

最新文章

热门文章