vue pc模拟滚动条

qq_40863690

已于 2022-12-23 16:47:04 修改

阅读量175

点赞数

分类专栏： vue 文章标签： firefox javascript 前端 vue.js css

于 2022-12-23 16:31:06 首次发布

本文链接：https://blog.csdn.net/qq_40863690/article/details/128204939

版权

本文介绍了如何使用Vue.js在PC端实现自定义滚动条的效果，涉及到JavaScript和CSS的技巧，特别关注了Firefox浏览器的兼容性问题。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <div id="box">
      <div id="content">
        <div v-for="(item, index) in 100" :key="index" style="color: #fff; padding: 8px 4px">
          {
  { item }}
        </div>
      </div>
      <div id="scroll">
        <div id="bar" @mousedown="bar"></div>
      </div>
    </div>
  </div>
</template>
<script>
let barBox = null; // 滚动条块
let scroll = null; // 滚动区域
let content = null; // 内容区域
let box = null;
let scrollValue = 0;
export default {
  data() {
    return {
      scrollTop: 0,
    };
  },
  mounted() {
    this.$nextTick(() => {
      barBox = document.querySelector("#bar");
      box = document.querySelector("#box");
      scroll = document.querySelector("#scroll");
      content = document.querySelector("#content");
      this.barHeight = 0;
      if (box.clientHeight < content.scrollHeight) {
        // 盒子高度小于内容高度时才出现滚动条
        thi