1. Html
	<div  @scroll="mouseScroll('elForm')"></div>
  1. CSS
	scroll {
          max-height: 210px;
          overflow-y: scroll;
         &::-webkit-scrollbar {
           width: 4px;
           height: 40px;
         }
          &::-webkit-scrollbar-thumb {
            border-radius: 2px;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #6b8ff7;
          }
          &::-webkit-scrollbar-track {
            box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
            border-radius: 2px;
            background: #d4dcf2;
          }
        }
  1. function
	data() {
		return {
			showScrollTop: 0
		}
	},
 	methods: {
		// 鼠标滚动事件
	    mouseScroll(item) {
	      const vm = this;
	      if (this.$refs[item].scrollTop === vm.showScrollTop) {
	        return false;
	      } else if (this.$refs[item].scrollTop > vm.showScrollTop) {
	        vm.showScrollTop = vm.showScrollTop + 43;
	        this.$refs[item].scrollTop = vm.showScrollTop;
	      } else if (this.$refs[item].scrollTop < vm.showScrollTop) {
	        vm.showScrollTop = vm.showScrollTop - 43;
	        this.$refs[item].scrollTop = vm.showScrollTop;
	      }
	    }
	}
Logo

前往低代码交流专区

更多推荐