realtorEasier-webSite/pc/src/page/service/temp/use.vue

<template>
  <div class="container">
    <div class="common-title">
      {{$t('service.use')}}
    </div>
  <div class="use-layout " :class="language">
    
    <template v-if="isFireFox" >
      <div class="ls-outer">
        <lselect :options="navs" :selected="navActive" class="select firefox-select" :class="{oy: navs.length > 15}" @change="handleChange" />
        <div class="ls-scrollbar">
          <div ref="thumb" class="ls-scroll-thumb" :style="{top:scorlltop}"></div>
        </div>
      </div>

      <scrollbar :scorlltop='scorlltop'>
        <div slot="con" class="use-con" ref="dcon" id="dcon">
          <img class="img" v-for="(item,i) in current.size" :src="`${$cdn}images/use/${current.id}/${language==='en'?'en':'zh'}/${i+1}.jpg`" :key="i" :alt="i+1">
        </div>
      </scrollbar>
    </template>

    <template v-else>
      <lselect :options="navs" :selected="navActive" class="select" :class="{oy: navs.length > 15}" @change="handleChange" />
      <div class="use-con" style="position:static" ref="dcon" id="dcon">
        <img class="img" v-for="(item,i) in current.size" :src="`${$cdn}images/use/${current.id}/${language==='en'?'en':'zh'}/${i+1}.jpg`" :key="i" :alt="i+1">
      </div>
    </template>

  </div>
  </div>
</template>

<script>
import lselect from '@/components/lselect'
import scrollbar from '../plugin/ff-scrollbar'
import browser from '@/util/browser'

import {mapState} from 'vuex'

export default {
  props: ['data'],
  computed: {
    ...mapState({
      language: state => state.language.current
    })
  },
  methods: {
    handleChange (nav) {
      setTimeout(async () => {
        let items = Array.from(this.$refs.dcon.querySelectorAll('img'))
        let offTop = 0
        items.forEach(item => {
          // item.style.background = '#fff'
          // let txt = item.querySelectorAll('span')[1].innerText
          if (String(item.alt) === String(nav.cover)) {
            offTop = item.offsetTop
          }
        })

        this.$refs.dcon.removeEventListener('scroll', this.listen)
        document.querySelector('#dcon').scrollTop = offTop
        let fixTop = Math.round(offTop / this.$refs.dcon.scrollHeight * 100)
        this.scorlltop = fixTop + '%'
        console.log(offTop)
        setTimeout(() => {
          this.$refs.dcon.addEventListener('scroll', this.listen)
        }, 500)
      }, 0)
    },
    listen (e) {
      let sTop = e.target.scrollTop
      let items = Array.from(this.$refs.dcon.querySelectorAll('img'))
      let active = ''
      let nav = ''
      items.forEach(item => {
        if (sTop > item.offsetTop - 1) {
          active = item.alt
        }
      })

      let fixTop = Math.round(sTop / this.$refs.dcon.scrollHeight * 100)
      this.scorlltop = fixTop + '%'
      this.navs.forEach(sub => {
        if (String(active) === String(sub.cover)) {
          nav = sub
        }
      })
      this.navActive = nav
    }
  },
  watch: {
    data: {
      immediate: false,
      deep: true,
      handler (newVal) {
        this.navs = this.data.data
        this.current = this.data.detail
        this.navActive = this.data.data[0]
        this.$refs.dcon.removeEventListener('scroll', this.listen)
        this.$refs.dcon.scrollTo(0, 0)
        setTimeout(() => {
          this.$refs.dcon.addEventListener('scroll', this.listen)
        }, 500)
      }
    }
  },
  data () {
    return {
      active: '',
      navs: this.data.data,
      current: this.data.detail,
      navActive: this.data.data[0],
      scorlltop: '0',
      isFireFox: browser.firefox
    }
  },
  mounted () {
    setTimeout(() => {
      this.$refs.dcon.addEventListener('scroll', this.listen)
    }, 0)
  },
  components: {lselect, scrollbar}
}
</script>

<style lang="scss" scoped>
  $lw: 304px;
  $cw: 480px;
  $encw: 430px;
  .common-title {
    margin: 85px 0 65px;
  }
  .ls-outer{
      min-width: 220px;
      position: absolute;
      top: 0;
      left: 0;
      max-height: 100%;
      overflow: hidden;
      height: 100%;
  }

  .ls-scrollbar{
    height: calc(100vh - 380px);
    position: absolute;
    right: 0;
    top: 0;
    width: 10px;
    border-right: 1px solid #dcdcdc;
  }
  .ls-scroll-thumb{
    height: 50px;
    width: 5px;
    background-color: #ddd;
    border-radius: 5px;
    position: absolute;
    top: 0;
    right: 0;
  }

.use-layout {
  position: relative;
  // max-width: 800px;
  // margin: 50px auto 72px;
  overflow: hidden;
  padding-left: $lw + 10px;
  padding-right: 10px;
  box-sizing: border-box;
  padding-bottom: 120px;
  .select {
    min-width: $lw;
    position: absolute;
    top: 0;
    left: 0;
    max-height: 590px;
    overflow-y: auto;
    height: 590px;
  }

  .firefox-select{
    min-width: $lw + 20px;
  }

  .img{
    margin-bottom: 20px;
    width: 100%;
    text-align: center;
  }

  .use-con{
    position: absolute;
    max-height: 100%;
    height: calc(100vh - 380px);
    overflow-y: auto;
    width: $cw;
    text-align: center;
    .img{
      &:last-of-type{
       margin-bottom: 200px;
      }
    }
    &::-webkit-scrollbar {
      width: 5px;
      height: 8px;
    }

    &::-webkit-scrollbar-thumb {
      height: 50px;
      background-color: rgba(221, 221, 221, 0.2);
      -webkit-border-radius: 4px;
      outline: 2px solid #fff;
      outline-offset: -2px;
    }

    &::-webkit-scrollbar-thumb:hover {
      height: 50px;
      background-color: #9f9f9f;
      -webkit-border-radius: 4px;
    }
  }

}
.en{
  max-width: 900px;
  padding-left: $lw + 158px;
  .use-con{
    width: $encw;
  }
}
</style>