Vue implements anchor positioning function

This article example shares the specific code of Vue to implement anchor positioning for your reference. The specific content is as follows

Here we mainly implement a simple scroll-triggered anchor point highlighting and click the anchor point to trigger the scrolling function. If you want to get the scroll height of the browser, each browser is different. Use the following methods:

Chrome: document.body.scrollTop
Firefox: document.documentElement.scrollTop
Safari: window.pageYOffset

I am scrolling a local element here, so it is slightly different. First attach the html and css code blocks:

scroll-content is the scrolling area, and operation-btn is the button that controls the behavior of the anchor point.

<template>
  <div class="anchor-point">
    <!-- Scrolling area -->
    <div class="scroll-content" @scroll="onScroll">
      <div class="scroll-item" style="height: 500px;background: #3a8ee6;">One layer</div>
      <div class="scroll-item" style="height: 500px;background: red;">Second floor</div>
      <div class="scroll-item" style="height: 500px;background: #42b983">Three layers</div>
      <div class="scroll-item" style="height: 1000px;background: yellow;">Four layers</div>
    </div>
    <!-- Button -->
    <div class="operation-btn">
      <div v-for="(item, index) in ['First floor','Second floor','Third floor','Fourth floor']" :key="index" @click="jump(index)"
           :style="{background: activeStep === index ? '#eeeeee' : '#ffffff'}">{{item}}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .anchor-point {
    flex-basis: 100%;
    display: flex;
    overflow: hidden;
    .scroll-content {
      height: 100%;
      width: 90%;
      overflow: scroll;
    }
    .operation-btn {
      width: 10%;
      height: 100%;
    }
  }
</style>

By listening to scroll events, highlight the anchor button

Here, by traversing the scroll items, it is determined whether the scroll bar scroll distance is greater than the scrollable distance of the current item (that is, the distance from the top of its offsetParent, which is body here)

//Scroll trigger button highlight onScroll (e) {
  let scrollItems = document.querySelectorAll('.scroll-item')
  for (let i = scrollItems.length - 1; i >= 0; i--) {
    //Judge whether the scroll bar scroll distance is greater than the scrollable distance of the current scroll item let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop
    if (judge) {
      this.activeStep = i
      break
    }
  }
},

Add a click event, scroll to the corresponding area according to the anchor point and achieve smooth scrolling

Here we refer to the method on the Internet, subdivide the scrolling distance into multiple small segments, and consider the upward and downward scrolling to achieve the scrolling transition animation.
Originally, I planned to use scrollIntoView to implement scrolling animation. scrollIntoView has good support in various browsers, but ScrollIntoViewOptions still has problems with browser compatibility, so I used the following distance division method instead.

// Click to switch anchor point jump (index) {
 let target = document.querySelector('.scroll-content')
 let scrollItems = document.querySelectorAll('.scroll-item')
 // Determine whether the scroll bar has scrolled to the bottom if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
   this.activeStep = index
 }
 let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop // The distance between the anchor element and the top of its offsetParent (here is body) (the distance to be scrolled)
 let distance = document.querySelector('.scroll-content').scrollTop // The distance between the scroll bar and the top of the scroll area // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // The distance between the scroll bar and the top of the scroll area (the scroll area is the window)
 // Scrolling animation implementation, use setTimeout recursion to achieve smooth scrolling, subdivide the distance into 50 small segments, and scroll once every 10ms // Calculate the distance of each small segment let step = total / 50
 if (total > distance) {
   smoothDown(document.querySelector('.scroll-content'))
 } else {
   let newTotal = distance - total
   step = newTotal / 50
   smoothUp(document.querySelector('.scroll-content'))
 }

 // Parameter element is the scrolling area function smoothDown (element) {
   if (distance < total) {
     distance += step
     element.scrollTop = distance
     setTimeout(smoothDown.bind(this, element), 10)
   } else {
     element.scrollTop = total
   }
 }

 // Parameter element is the scrolling area function smoothUp (element) {
   if (distance > total) {
     distance -= step
     element.scrollTop = distance
     setTimeout(smoothUp.bind(this, element), 10)
   } else {
     element.scrollTop = total
   }
 }

 // document.querySelectorAll('.scroll-item').forEach((item, index1) => {
 // if (index === index1) {
 // item.scrollIntoView({
 // block: 'start',
 // behavior: 'smooth'
 // })
 // }
 // })
}

Here is the effect diagram:

This is the first time I have implemented the effects of anchor point positioning and scrolling highlight anchor points. There are some shortcomings. Please correct me if you have any questions or suggestions.
I am very grateful for the inspiration brought by this article, and I got a new knowledge point.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: