锚点双向定位

    
        Hangzhou
        Shanghai
        Beijing
        Chengdu
    


    
    
    
    

change(e) {
      this.activeClass = e.target.value
      let jump = document.querySelectorAll('.condition-container')
      jump[this.activeClass].scrollIntoView({ block: 'start', behavior: 'smooth' })
},
scrollEvent(e) {
      let scrollItems = document.querySelectorAll('.condition-container')
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop
        if (judge) {
          this.activeClass = i
          this.value = this.activeClass
          break
        }
      }
      // 滚动条触底了
      if (e.srcElement.scrollTop + e.srcElement.offsetHeight === e.srcElement.scrollHeight) {
        this.activeClass = 4 - 1
        this.value = this.activeClass
      }
},

.wrapper{
  height: 400px;
  overflow-y: auto;
}
.wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.05);
}
.wrapper::-webkit-scrollbar-track {
  background: rgb(81, 98, 141);
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 5px rgba(37, 37, 37, 0.05);
}
.div1{
  height: 500px;
  background: #f00;
}
.div2{
  height: 400px;
  background: #0f0;
}
.div3{
  height: 600px;
  background: #00f;
}
.div4{
  height: 300px;
  background: #000;
}