{"version":3,"sources":["webpack:///./src/components/common/scrollContainer.vue","webpack:///src/components/common/scrollContainer.vue","webpack:///./src/components/common/scrollContainer.vue?0191","webpack:///./src/components/common/scrollContainer.vue?6618","webpack:///./src/components/common/scrollContainer.vue?3dfc"],"names":["render","_vm","this","_c","_self","staticClass","style","height","on","$event","hideScroll","directives","name","rawName","value","resize","expression","ref","onMosewheel","_t","heightPre","barHeight","transform","translateY","stopPropagation","preventDefault","moveStart","apply","arguments","_e","staticRenderFns","components","bind","el","binding","width","isReize","document","defaultView","getComputedStyle","scrollHeight","__vueSetInterval__","setInterval","unbind","clearInterval","props","type","String","default","isTop","Boolean","data","isMove","trackHeight","wrapHeight","wrapContentHeight","moveClientY","scrollTop","computed","watch","e","created","mounted","initScrollListner","activated","methods","scroll","$refs","scrollRef","clientHeight","updateScroll","scrollY","target","y","clientY","moveTo","moveEnd","_this","onmousemove","_this2","onmouseup","moveTop","_this3","$nextTick","moveBottom","_this4","component"],"mappings":"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","file":"js/chunk-1057ff5f.528e0d26.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"scrollbar-box\",style:({ height: _vm.height }),on:{\"mouseleave\":function($event){_vm.hideScroll = false},\"mouseover\":function($event){_vm.hideScroll = true}}},[_c('div',{staticClass:\"scrollbar-y\"},[_c('div',{directives:[{name:\"resize\",rawName:\"v-resize\",value:(_vm.resize),expression:\"resize\"}],ref:\"scrollRef\",staticClass:\"scroll-wrap\",on:{\"scroll\":_vm.onMosewheel}},[_vm._t(\"default\")],2),(_vm.hideScroll)?_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.heightPre < 1),expression:\"heightPre < 1\"}],ref:\"barRef\",staticClass:\"scrollbar-track\"},[_c('div',{ref:\"thumb\",staticClass:\"scrollbar-thumb\",style:({\n          height: _vm.barHeight + 'px',\n          transform: 'translateY(' + _vm.translateY + 'px)',\n        }),on:{\"mousedown\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.moveStart.apply(null, arguments)}}})]):_vm._e()])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\r\n<template>\r\n  <div\r\n    class=\"scrollbar-box\"\r\n    :style=\"{ height: height }\"\r\n    @mouseleave=\"hideScroll = false\"\r\n    @mouseover=\"hideScroll = true\"\r\n  >\r\n    <div class=\"scrollbar-y\">\r\n      <div\r\n        ref=\"scrollRef\"\r\n        class=\"scroll-wrap\"\r\n        v-resize=\"resize\"\r\n        @scroll=\"onMosewheel\"\r\n      >\r\n        <slot></slot>\r\n      </div>\r\n      <div\r\n        v-show=\"heightPre < 1\"\r\n        ref=\"barRef\"\r\n        class=\"scrollbar-track\"\r\n        v-if=\"hideScroll\"\r\n      >\r\n        <div\r\n          :style=\"{\r\n            height: barHeight + 'px',\r\n            transform: 'translateY(' + translateY + 'px)',\r\n          }\"\r\n          class=\"scrollbar-thumb\"\r\n          @mousedown.stop.prevent=\"moveStart\"\r\n          ref=\"thumb\"\r\n        ></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n \r\n<script>\r\nexport default {\r\n  components: {},\r\n  directives: {\r\n    // 使用局部注册指令的方式\r\n    resize: {\r\n      // 指令的名称\r\n      bind(el, binding) {\r\n        // el为绑定的元素，binding为绑定给指令的对象\r\n        let width = \"\",\r\n          height = \"\";\r\n\r\n        function isReize() {\r\n          const style = document.defaultView.getComputedStyle(el);\r\n          if (width !== style.width || height !== el.scrollHeight) {\r\n            binding.value(); // 关键\r\n          }\r\n          width = style.width;\r\n          height = el.scrollHeight;\r\n        }\r\n        el.__vueSetInterval__ = setInterval(isReize, 300);\r\n      },\r\n      unbind(el) {\r\n        clearInterval(el.__vueSetInterval__);\r\n      },\r\n    },\r\n  },\r\n  props: {\r\n    height: {\r\n      type: String,\r\n      default: \"100%\",\r\n    },\r\n    isTop: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      isMove: false,\r\n      trackHeight: 0, // 滚动条轨道高度\r\n      wrapHeight: 0, // 容器高度（可视高度）\r\n      wrapContentHeight: 0, // 内容高度（可滚动内容的高度）\r\n      translateY: 0,\r\n      moveClientY: 0,\r\n      scrollTop: 0,\r\n      hideScroll: false,\r\n    };\r\n  },\r\n  computed: {\r\n    barHeight() {\r\n      return this.heightPre * this.trackHeight;\r\n    },\r\n    // 可视高度与内容高度的比例\r\n    heightPre() {\r\n      return this.wrapHeight / this.wrapContentHeight;\r\n    },\r\n  },\r\n  watch: {\r\n    translateY(e) {\r\n      // console.log(e, 'translateY');\r\n    },\r\n  },\r\n  // 生命周期 - 创建完成（可以访问当前this实例）\r\n  created() {},\r\n  // 生命周期 - 挂载完成（可以访问DOM元素）\r\n  mounted() {\r\n    this.initScrollListner();\r\n  },\r\n  activated() {\r\n    //初始化滚动条置顶\r\n    this.translateY = 0;\r\n  },\r\n  methods: {\r\n    initScrollListner(e) {\r\n      let scroll = this.$refs.scrollRef;\r\n      this.wrapContentHeight = scroll.scrollHeight;\r\n      this.wrapHeight = scroll.clientHeight;\r\n      this.trackHeight = scroll.clientHeight;\r\n      if (!this.isTop) {\r\n        scroll.scrollTop = this.wrapContentHeight;\r\n      }\r\n    },\r\n    updateScroll() {\r\n      this.initScrollListner();\r\n    },\r\n    onMosewheel(e) {\r\n      this.scrollY(e.target.scrollTop * this.heightPre);\r\n    },\r\n    scrollY(y) {\r\n      this.translateY = y;\r\n    },\r\n    // 鼠标开始移动\r\n    moveStart(e) {\r\n      this.isMove = true;\r\n      // 开始移动时鼠标距离thumb顶部的位置\r\n      this.moveClientY = e.clientY - this.translateY;\r\n      this.moveTo();\r\n      this.moveEnd();\r\n    },\r\n    // 鼠标移动，改变thumb的位置以及容器scrollTop的位置\r\n    moveTo() {\r\n      document.onmousemove = (e) => {\r\n        if (this.isMove) {\r\n          if (\r\n            e.clientY - this.moveClientY >\r\n            this.trackHeight - this.barHeight\r\n          ) {\r\n            this.translateY = this.trackHeight - this.barHeight;\r\n          } else if (e.clientY - this.moveClientY < 0) {\r\n            this.translateY = 0;\r\n          } else {\r\n            this.translateY = e.clientY - this.moveClientY;\r\n          }\r\n          this.$refs.scrollRef.scrollTop = this.translateY / this.heightPre;\r\n        }\r\n      };\r\n    },\r\n    // 鼠标移动结束\r\n    moveEnd() {\r\n      document.onmouseup = (e) => {\r\n        if (this.isMove) {\r\n          this.isMove = false;\r\n        }\r\n      };\r\n    },\r\n    resize() {\r\n      this.initScrollListner();\r\n    },\r\n    //滚动条移动到顶部\r\n    moveTop() {\r\n      this.hideScroll = true;\r\n      this.$nextTick(() => {\r\n        this.$refs.scrollRef.scrollTop = 0;\r\n      });\r\n    },\r\n    //滚动条置底\r\n    moveBottom() {\r\n      this.hideScroll = true;\r\n      this.$nextTick(() => {\r\n        let scrollRef = this.$refs.scrollRef;\r\n        //滚动条高度\r\n        let height=scrollRef.clientHeight/scrollRef.scrollHeight*scrollRef.clientHeight\r\n        //滚动条最底部（内容高度-可视高度-滚动条高度）\r\n        scrollRef.scrollTop =scrollRef.scrollHeight-scrollRef.clientHeight-height;\r\n      });\r\n    },\r\n  },\r\n};\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n.scrollbar-box {\r\n  height: 600px;\r\n  overflow: hidden;\r\n}\r\n.scrollbar-y {\r\n  position: relative;\r\n  height: 100%;\r\n  margin-right: -17px;\r\n  .scroll-wrap {\r\n    height: 100%;\r\n    overflow-y: scroll;\r\n  }\r\n  .scrollbar-track {\r\n    position: absolute;\r\n    top: 0;\r\n    right: 17px;\r\n    bottom: 0;\r\n    width: 16px;\r\n    // background-color: #000000; //背景\r\n    border-radius: 8px;\r\n    z-index: 20;\r\n    .scrollbar-thumb {\r\n      width: 12px;\r\n      margin: 0 auto;\r\n      height: 20%;\r\n      background-color: #eeeeee; //滑块\r\n      border-radius: 6px;\r\n      cursor: default;\r\n      // transition: all 0.01s;\r\n    }\r\n  }\r\n}\r\n</style>","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./scrollContainer.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./scrollContainer.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./scrollContainer.vue?vue&type=template&id=4f575370&scoped=true\"\nimport script from \"./scrollContainer.vue?vue&type=script&lang=js\"\nexport * from \"./scrollContainer.vue?vue&type=script&lang=js\"\nimport style0 from \"./scrollContainer.vue?vue&type=style&index=0&id=4f575370&prod&lang=scss&scoped=true\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"4f575370\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./scrollContainer.vue?vue&type=style&index=0&id=4f575370&prod&lang=scss&scoped=true\""],"sourceRoot":""}