vue滚轮缩放，拖拽滚动（不要滚动条）-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue滚轮缩放，拖拽滚动（不要滚动条）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<template>
  <div class="list" id="list" @wheel="wheel">
    <div class="scroll" id="scroll">
      <div class="title_scroll">
        <div v-for="(item, index) in list" class="item">
          <div class="title">{{ item.name }}</div>
          <div
            class="build"
            :style="{
              'padding-bottom': 0,
              'padding-top': '5px',
              'grid-template-columns': `repeat(${
                item.list.length / length.floorsNum
              }, ${grid.columns}px)`,
              'grid-template-rows': `repeat(1, 0px)`,
            }"
          ></div>
        </div>
      </div>
      <div class="build_scroll" id="build_scroll">
        <div v-for="(item, index) in list" class="item">
          <div
            class="build"
            :style="{
              'grid-template-columns': `repeat(${
                item.list.length / length.floorsNum
              }, ${grid.columns}px)`,
              'grid-template-rows': `repeat(${length.floorsNum}, ${grid.rows}px)`,
            }"
          >
            <div
              class="cell"
              :style="{ 'background-color': getStatus(child.message) }"
              v-for="child in item.list"
            >
              <li>
                {{ child.name }}

                <span v-if="child.message">{{
                  child.message.faMenZhuangTai
                }}</span>
              </li>

              <li v-if="child.message">{{ child.message.shiNeiWenDu }}°C</li>

              <ul v-if="child.message">
                <li>进水:{{ child.message.gongShuiWenDu }}°C</li>
                <li>回水:{{ child.message.huiShuiWenDu }}°C</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";

const { proxy } = getCurrentInstance();
defineProps({
  list: {
    type: Object,
    default: function () {
      return [];
    },
  },
  length: {
    type: Object,
    default: function () {
      return {
        floorsNum: 0,
        houseNum: 0,
      };
    },
  },
});
const grid = reactive({
  columns: 65,
  rows: 56,
});
onMounted(() => {
  initDrag();
});
function getStatus(value) {
  // const value = e.grade;
  if (!value) {
    return "#a7a1a1";
  } else {
    return "#aa0c49";
  }
}
function initDrag() {
  let dragScrollArea = document.getElementById("list");
  dragScrollArea.onmousedown = (e) => {
    let build_scroll = document.getElementById("build_scroll");
    let scroll = document.getElementById("scroll");
    let fromX = e.clientX;
    let scrollLeft = scroll.scrollLeft;
    let fromY = e.clientY;
    let scrollTop = build_scroll.scrollTop;
    dragScrollArea.onmousemove = (e) => {
      let toX = e.clientX;
      let toY = e.clientY;
      dragScrollArea.style["user-select"] = "none";

      scroll.scrollLeft = scrollLeft + (fromX - toX);
      build_scroll.scrollTop = scrollTop + (fromY - toY);
    };
    document.onmouseup = function (e) {
      dragScrollArea.onmousemove = null;
      dragScrollArea.onmouseup = null;
      dragScrollArea.style["user-select"] = "auto";
    };
  };
}
function wheel(event) {
  let obj = document.getElementById("list");

  let zoom = parseInt(obj.style.zoom) || 100;

  zoom += event.wheelDelta / 12;
  //最小范围 和 最大范围
  if (zoom >= 80 && zoom < 500) {
    obj.style.zoom = zoom + "%";
  }
  return false;
}
</script>

<style scoped>
.list {
  width: 100%;

  display: flex;
  white-space: nowrap;

  height: 97%;
  justify-content: center;
  align-items: center;
}
.scroll {
  height: inherit;
  overflow: hidden;
  /* width: inherit; */
}
.build_scroll {
  /* background-color: red; */
  overflow: hidden;
  height: 100%;
  width: fit-content;
}
.item {
  display: inline-block;
  margin-right: -1px;
  flex-shrink: 0;
}
.cell:hover > ul {
  display: block;
}
.title {
  height: 50px;
  text-align: center;
  color: rgb(255, 255, 255);
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  height: 20px;
  /* width: 224px; */
  background-color: rgb(90, 89, 89);
  z-index: 10;
}
.title_scroll {
  display: flex;

  /* padding-left: 4px;
  padding-right: 4px; */
  /* display: inline; */
}
li {
  list-style: none;
}
ul {
  padding-inline-start: 1px;
  display: none;
  position: absolute;
  top: -5px;
  width: 75px;
  height: 50px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 8px;
}
.build {
  background: rgb(90, 89, 89);
  margin-top: -1px;
  display: grid;
  overflow: auto;
  grid-auto-flow: column;
  /* grid-template-columns: repeat(12, 115px);
  grid-template-rows: repeat(12, 125px); */
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  padding: 10px;
}
.cell {
  padding: 0px;
  border: 0px;
  background: rgb(170, 12, 73);
  font-size: 2px;
  color: rgb(255, 255, 255);
  box-shadow: rgb(13, 27, 58) 4px 4px;
  position: relative;
  /* min-height: 45px;
  min-width: 50px; */
}
</style>

wheel监听滚轮事件，更改div的zoom值区域缩放

监听div的按下，移动，松开事件，移动时计算偏移量，将需要拖拽滚动div的scrollLeft和scrollTop值改变，div的overflow需要hidden，auto等才可以使scrollLeft和scrollTop生效文章来源地址https://www.toymoban.com/news/detail-652875.html

到了这里，关于vue滚轮缩放，拖拽滚动（不要滚动条）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！