页面滚动那些事儿（滚动条样式自定义，隐藏滚动条，scrollIntoView遇到头部fixed定位滚动被遮挡、vue-scrollto插件的应用）

最新推荐文章于 2024-06-12 17:03:49 发布
最新推荐文章于 2024-06-12 17:03:49 发布
阅读量3.7k 收藏 12
点赞数 2
分类专栏： Vue 文章标签： css javascript html vue.js 滚动条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38800316/article/details/126675790
版权

滚动条样式 CSS 隐藏滚动条 vue-scrollto scrollIntoView
关键词由CSDN通过智能技术生成

1、滚动条自定义样式

        1-1、设定全局样式

                当页面存在多个滚动条时，想要所有的滚动条设置成同一个样式可以：

                以谷歌浏览器举例，因滚动条的设置存在兼容问题，下方有其他浏览器样式配置

/*滚动条样式*/
::-webkit-scrollbar {
    background: #eee;
    width: 8px;
}
/*滚动条轨道的样式*/
::-webkit-scrollbar-track {
    background: coral;
    width: 8px;
}
/*滚动条滑块的样式*/
::-webkit-scrollbar-thumb {
    background: red;
    width: 8px;
    border-radius: 4px;
}

                代码实例演示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ::-webkit-scrollbar {
        background: coral;
        width: 8px;
      }
      ::-webkit-scrollbar-thumb {
        background: yellow;
        width: 8px;
        border-radius: 4px;
      }
      .scrollbox {
        margin: 0 auto;
        width: 640px;
        height: 480px;
        overflow: auto;
        line-height: 100px;
        text-align: center;
        font-size: 38px;
        background-color: rgb(89, 191, 238);
      }
    </style>
  </head>

  <body>
      <div class="scrollbox ">
        <div class="title">x</div>
        <div class="title">i</div>
        <div class="title">b</div>
        <div class="title">i</div>
        <div class="title">n</div>
        <div class="title">g</div>
        <div class="title">-</div>
        <div class="title">G</div>
      </div>
      <br />
      <div class="scrollbox ">
        <div class="title">x</div>
        <div class="title">i</div>
        <div class="title">b</div>
        <div class="title">i</div>
        <div class="title">n</div>
        <div class="title">g</div>
        <div class="title">-</div>
        <div class="title">G</div>
      </div>
  </body>
</html>

         1-2、设定局部样式

                当页面存在多个滚动条时，想要不同的滚动条设置成不同的样式

                可以对不同的【滚动区域结构】设置不同的-webkit-(scrollbar、scrollbar-thumb)

                代码实例演示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .scrollbox {
        margin: 0 auto;
        width: 640px;
        height: 480px;
        overflow: auto;
        line-height: 100px;
        text-align: center;
        font-size: 38px;
        background-color: rgb(89, 191, 238);
      }
      .scro1::-webkit-scrollbar {
        background: coral;
        width: 8px;
      }
      .scro1::-webkit-scrollbar-thumb {
        background: yellow;
        width: 8px;
        border-radius: 4px;
      }

      .scro2::-webkit-scrollbar {
        background: orange;
        width: 18px;
        border-radius: 9px;
      }
      .scro2::-webkit-scrollbar-thumb {
        width: 18px;
        border-radius: 9px;
        background: green;
      }
    </style>
  </head>

  <body>
    <div class="scrollbox scro1">
      <div class="title">x</div>
      <div class="title">i</div>
      <div class="title">b</div>
      <div class="title">i</div>
      <div class="title">n</div>
      <div class="title">g</div>
      <div class="title">-</div>
      <div class="title">G</div>
    </div>
    <br />
    <div class="scrollbox scro2">
      <div class="title">x</div>
      <div class="title">i</div>
      <div class="title">b</div>
      <div class="title">i</div>
      <div class="title">n</div>
      <div class="title">g</div>
      <div class="title">-</div>
      <div class="title">G</div>
    </div>
  </body>
</html>

         1-3、提示：

                背景色也可以设置为transparent透明

                不同浏览器对于滚动条的样式兼容不同

/*IE浏览器⬇*/
/*三角箭头的颜色*/   
scrollbar-arrow-color:; 
/*立体滚动条的颜色*/
scrollbar-face-color:;  
/*立体滚动条亮边的颜色*/  
scrollbar-3dlight-color:;
/*滚动条空白部分的颜色*/     
scrollbar-highlight-color:;  
/*立体滚动条阴影的颜色*/    
scrollbar-shadow-color:;
/*立体滚动条强阴影的颜色*/   
scrollbar-darkshadow-color:; 
/*立体滚动条背景颜色*/ 
scrollbar-track-color:;
/*滚动条的基本颜色*/    
scrollbar-base-color:; 

/*火狐浏览器⬇*/
/*滚动条滑块、轨道的颜色设置*/
scrollbar-color: coral yellow; 
/*滚动条宽度 auto thin none*/
scrollbar-width: ;

2、隐藏滚动条

        （不少同学想要滚动，但不想要滚动条，滚动条说：就多了一个字我就变丑了？）

        2-1、普通滚动条的隐藏--就类似于上面那种普通的滚动条

                【注意】滚动条隐藏的选择器，谷歌写在-webkit-scrollbar中，火狐IE写在滚动标签下

.demo::-webkit-scrollbar {
display: none; /* Chrome Safari */
}

.demo {
scrollbar-width: none; /* firefox /
-ms-overflow-style: none; / IE 10+ */
overflow-y: auto;
}

                代码实例演示： 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .scrollbox {
        margin: 0 auto;
        width: 640px;
        height: 480px;
        overflow: auto;
        line-height: 100px;
        text-align: center;
        font-size: 38px;
        background-color: rgb(89, 191, 238);
      }
      .scro1::-webkit-scrollbar {
        display: none;/* Google */
      }
      .scro1 {
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */
      }
    </style>
  </head>

  <body>
    <div class="scrollbox scro1">
      <div class="title">x</div>
      <div class="title">i</div>
      <div class="title">b</div>
      <div class="title">i</div>
      <div class="title">n</div>
      <div class="title">g</div>
      <div class="title">-</div>
      <div class="title">G</div>
    </div>
  </body>
</html>

         2-2、iframe的滚动条隐藏（视觉隐藏）

                借助位置偏移，父级宽度小于iframe的宽度，来遮挡住iframe的滚动条

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      #box {
        width: 530px;
        height: 680px;
        overflow: hidden;
      }
      iframe {
        width: 530px;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <iframe
        marginwidth="0"
        marginheight="0"
        src="transitiondemo.html"
        frameborder="0"
      ></iframe>
    </div>
  </body>
</html>

3、锚点定位滚动之 scrollIntoView、vue-scrollto

        3-1 源自于element的接口scrollIntoView会滚动元素的父容器

                问题：当顶部出现fixed固定定位时，滚动区域就会向上顶，也就会被顶部遮住一部分

                解决：让滚动区也以fixed做呈现，top值定为顶部区域的高度即可不被遮挡；

<template>
  <div class="scroll-box">
    <!--头部-->
    <div class="header">here is header</div>
    <!--侧边栏-->
    <aside>
      <li
        v-for="(item, index) in asideItem"
        :key="item"
        @click="scrollTo(index)"
      >
        {{ item }}
      </li>
    </aside>
    <!--滚动区域-->
    <div class="content">
      <div class="con-item" v-for="item in asideItem" :key="item">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'scrollIntoView',
  data() {
    return {
      asideItem: ['google', 'uc', 'IE', 'firefox', '360', 'liebao']
    };
  },
  methods: {
    scrollTo(index) {
      document.querySelectorAll('.con-item')[index].scrollIntoView({
        behavior: 'smooth',
        block: 'start',
        inline: 'nearest'
      });
    }
  }
};
</script>

<style lang="less">
.scroll-box {
  width: 100%;
  height: 100%;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  line-height: 100px;
  font-size: 36px;
  background: coral;
  opacity: 0.6;
}
aside {
  position: fixed;
  right: 0;
  bottom: 100px;
  width: 80px;
  height: 200px;
  background: yellow;
  & > li:hover {
    cursor: pointer;
  }
  /*因为content给与固定定位，为了让侧边栏不被遮盖得提高层级*/
  z-index: 999;
}
.content {
  width: 100%;
  height: 750px;
  overflow-y: scroll;
  border: 2px dashed darksalmon;
  margin: 0 auto;
  position: fixed;
  top: 100px;
  overflow-y: scroll;
  & > div {
    width: 100%;
    height: 500px;
    line-height: 500px;
    text-align: center;
    font-size: 36px;
  }
  & > div:nth-child(2n) {
    background: burlywood;
  }
  /*不显示滚动条——上文有介绍了*/
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}
li {
  line-height: 30px;
}
</style>

        3-2 vue适用的vue-scrollto插件实现

                两种配置方式（全局配置、局部配置）

                问题：全局配置这里我这边测试时offset配置项不太好使（也可能我忽视了什么细节）

                先安装功能依赖，npm包位置

## npm安装
npm install --save vue-scrollto
## yarn安装
yarn add vue-scrollto

                看全局配置

import Vue from 'vue';
import App from './App.vue';
const VueScrollTo = require('vue-scrollto');
Vue.use(VueScrollTo, {
  container: 'document', // 滚动元素
  duration: 500, // 动画时长
  easing: 'ease', // 动画曲线
  offset: 100, // 滚动终点距离父元素顶部距离
  force: true, // 强制立即执行，即便元素是可见的
  cancelable: true,
  onStart: false,
  onDone: false,
  onCancel: false,
  x: false, // x 轴禁止滚动
  y: true
});
new Vue({
  render: function(h) {
    return h(App);
  }
}).$mount('#app1');
this.$scrollTo(element, duration, options)

                还可以通过v-指令来实现滚动（v-scroll-to）

<template>
  <div id="app">
    <div class="flex-box">
      <div class="flex-l">
        <ul class="jumpbtn">
         <!--通过v-scroll-to指令来使用，对应的值就是要滚动至顶的目标dom元素-->
         <!--也可以直接放上一个对象（上文中main.js中引用VueScrollTo时穿入的第二个参数）-->
          <li class="btn" v-for="item in boxs" :key="item.id">
            <a href="#" v-scroll-to="'#' + item.id">
              {{ item.id + item.title }}</a
            >
          </li>
        </ul>
      </div>
      <div class="flex-r">
        <scroll-page
          v-for="item in boxs"
          :key="item.id"
          :id="item.id"
          :title="item.id + item.title"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      boxs: [
        { id: "bt-1", title: "Anita" },
        { id: "bt-2", title: "Anita" },
        { id: "bt-3", title: "Anita" },
        { id: "bt-4", title: "Anita" },
        { id: "bt-5", title: "Anita" },
        { id: "bt-6", title: "Anita" },
        { id: "bt-7", title: "Anita" },
      ],
    };
  },
};
</script>

<style>
a {
  text-decoration: none;
}
li {
  list-style: none;
}
#app {
  font-family: "仿宋";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.flex-box {
  display: flex;
  flex-direction: row;
  border: 1px solid salmon;
}
.flex-l {
  width: 20%;
  position: fixed;
  top: 100px;
  right: 0px;
  border: 1px dashed yellowgreen;
}
.flex-r {
  width: 80%;
}
</style>

                局部配置使用（offset的配置就可以来解决滚动至顶部被fixed头部遮盖的问题）

<template>
  <div class="scrollDemo">
    <div class="demoNav flex-center-center">
      <div
        class="demoNavItem"
        v-for="(item, index) in demoNavItem"
        :key="index"
        :class="{ navActive: idx == index }"
        @click="changNav(index)"
      >
        {{ item }}
      </div>
    </div>
    <div class="demoContent">
      <!-- 如果内容为循环，id则定义为:id="'demoItem'+index" -->
      <div class="demoItem0 demoItem" id="demoItem0">google</div>
      <div class="demoItem1 demoItem" id="demoItem1">uc</div>
      <div class="demoItem2 demoItem" id="demoItem2">IE</div>
      <div class="demoItem3 demoItem" id="demoItem3">firefox</div>
      <div class="demoItem4 demoItem" id="demoItem4">360</div>
      <div class="demoItem5 demoItem" id="demoItem5">liebao</div>
    </div>
  </div>
</template>
<script>
// 引入
var VueScrollTo = require("vue-scrollto");
export default {
  data() {
    return {
      idx: 0,
      demoNavItem: [
        "google",
        "uc",
        "IE",
        "firefox",
        "360",
        "liebao",
      ],
    };
  },
  methods: {
    // 点击导航后触发
    changNav(index) {
      console.log(this)
      this.idx = index;
      // 通过VueScrollTo调用内置scrollTo方法实现滚动效果
      VueScrollTo.scrollTo(document.getElementById("demoItem" + index), 1000, {
        offset: -70,
      });
    },
  },
};
</script>
<style scoped>
.flex-center-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.demoNav {
  width: 100%;
  height: 70px;
  background: rgb(247, 183, 153);
  /* 浏览器窗口顶部 */
  position: fixed;
  /* position: sticky; */
  left: 0;
  top: 0;
}
.demoNavItem {
  font-size: 40px;
  color: #fff;
  margin-left: 30px;
  cursor: pointer;
}
.navActive {
  color: rgb(36, 39, 204);
}
.demoItem {
  width: 100%;
  height: 600px;
  font-size: 60px;
  color: #fff;
  text-align: center;
  padding: 60px 0 0 0;
}
.demoItem0 {
  background: rgba(255, 61, 61, 0.945);
}
.demoItem1 {
  background: rgb(250, 159, 40);
}
.demoItem2 {
  background: rgb(238, 255, 0);
}
.demoItem3 {
  background: rgb(63, 247, 7);
}
.demoItem4 {
  background: rgb(21, 114, 253);
}
.demoItem5 {
  background: rgb(248, 6, 248);
}
</style>

 

昔冰_G
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue添加锚点,实现滚动页面时锚点添加相应的class操作
10-14
在Vue中实现页面滚动时锚点添加相应class的操作，通常是为了增强用户体验，使得用户能够清晰地看到当前浏览的位置。以下将详细讲解实现这一功能的步骤和相关知识点。 首先，我们需要在HTML模板中设置锚点。在提供的...
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
11-23
在开发Web应用，尤其是涉及到实时信息更新的场景，如在线聊天功能时，常常需要实现一个自动滚动的效果，确保用户能够始终看到最新的内容。在这种情况下，我们需要控制特定的DIV元素（通常作为消息容器）的滚动条自动...
scrollIntoView跳转被遮挡的方法
weixin_54720502的博客
05-05 753
如果scrollIntoView不管用的时候，还有一个跳转的方式，先算出元素所在的位置，通过getBoundingClientRect（获取元素的位置和尺寸）。ps：例如,var distanceToViewportTop = divRect.top - '70';scrollIntoView最长用的案例是在跳转到某一个位置，可是区域的最顶部。可以用 document.documentElement.scrollTop -= '多少值';
scrollIntoView()，头部有fixed布局会导致滚动条丢失精度的问题，怎么办
u012732909的博客
07-24 1218
使用CSS的scroll-margin-top属性，在元素滚动到达时添加一个额外的距离，以避免滚动到头部fixed布局之下。
Vue内容过多隐藏侧边滚动条，几行代码解决！
最新发布
MyZy_的博客
06-12 120
Vue内容过多隐藏侧边滚动条
scrollIntoView()，滚动到指定区域
qq_38906234的博客
12-10 8082
滚动到指定区域 Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。 element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean型参数 element.scrollIntoView(scrollIn...
js使用scrollIntoView()被遮挡
weixin_46361785的博客
02-22 782
js使用scrollIntoView()被遮挡
vue 中 scrollIntoView
weixin_45972345的博客
04-22 4688
vue 中使用 scrollIntoView <div class="item_type" :id="item.id"> <span >{{item.label}}</span> </div> document.getElementById(item.id).scrollIntoView() scrollIntoView({ behavior：auto //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。 block
在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案
08-31
在iOS系统的Web应用中，开发者可能会遇到一个棘手的问题，那就是当尝试使用滚动条滚动到页面的特定位置时，页面会出现空白区域。这个问题通常与 `-webkit-overflow-scrolling` 这个CSS属性有关。该属性是苹果特有的...
js将滚动条滚动到指定位置的简单实现方法
10-22
总结一下，JavaScript实现滚动条滚动到指定位置主要依赖于`window.location.hash`、`document.getElementById().scrollIntoView()`或`window.scrollTo()`等方法。这些技术的应用可以丰富网页的交互性，提升用户体验...
vue项目引入vue-scrollTo
vscode_js的博客
01-15 2738
vue项目引入vue-scrollTo插件的完整步骤： 使用npm安装则如下： 1、安装vue-scrollto npm install --save vue-scrollto 2、项目根目录src文件夹下创建scroll文件夹（文件夹名字自定义，我习惯创建名为scroll），并在scroll文件夹内部创建scrollTo.js（该js文件名自定义，我习惯创建名为scrollTo.js，方便理解），将下面的js复制并粘贴到scrollTo.js中 import BezierEasing from
tab导航条在 滑动/滚动 过程中的隐藏与展示，滑动/滚动 到页面最底部时展示
yjy528的博客
07-02 995
一个类似于微信导航的导航栏 需求：页面向上滑动/滚动时，底部导航消失； 页面向下滑动/滚动时，底部导航显示； 页面滑动/滚动到最底部时，导航展示 在https://www.cnblogs.com/theWayToAce/p/7144477.html这篇文章中找到的方法经过测试以后可用。 // tab滑动效果 var isStopScroolTimer=null; var topValue=nul...
element-ui table设置列fixed时X轴滚动条无法拖动问题，表格有合计也能解决
源码好优多
04-19 523
问题：在使用element-ui的table组件时，给表格的某些列设置了fixed属性，让列可以固定，不随着滚动条滚动移动，结果发现设置后，拖动横向的滚动条的前半部分无法拖动。后来发现原因是设置了fixed属性的列(左侧的div)把滚动条覆盖了。
React页面点击悬浮按钮滑动定位到页面顶部
风行天下
06-17 2596
Web页面上，当某个页面内容特别多，下拉到底部的时候，想再返回页面顶部就得鼠标滚轮滑好多下，或者没有鼠标的话操作就更麻烦了。这个时候页面右下角往往会放一个悬浮按钮，点击按钮立即滑动到页面顶部，就方便了很多。本文就是此功能的一个简单的实现。在布局文件里加上这个按钮： 上面的代码里，IcoTop是自定义的一个图标，你可以替换为自己需要的图片地址。position: fixed 设置按钮的定位方式为基于浏览器窗口定位。这样不管页面滑动到什么位置，这个按钮始终显示在右下角，距离右边和底部60px。zIndex设
在vue中 设置锚点 被固定顶部遮挡的问题
qq_44754016的博客
10-06 1797
1.如何设置锚点 点击左侧列表，跳转到页面指定的位置。 将页面不同模块设置不同id属性 点击左侧菜单时，采用scrollIntoView() 的方式实现 (注：我用的是vue3 的 script setup语法糖 的写法） <span @click="jump('color')">颜色</span> <div id="color"> <span> 颜色 </span> ......颜色模块的内容 </div> <s
页面滚动到指定位置——js中scrollIntoView()的用法
热门推荐
yehaocheng520的博客
05-23 1万+
页面滚动到指定位置——js中scrollIntoView()的用法
scrollIntoView()滚动得位置有差异
ITKEP的博客
03-17 2773
通过querySelector()方法获取元素，并调用scrollIntoView()方法将其滚动到可视区域内。然后，获取父容器的滚动距离，并根据子元素的位置，计算出子元素相对于父容器的滚动距离，在调用父容器的scrollTo()方法来实现。如果调用该方法之后，元素没有滚动到指定的位置，有可能是因为调用的不正确，也有可能是元素所在的父容器存在滚动条，导致滚动到了父容器的可视区域内。如果元素所在的父容器存在滚动条，可能需要将父容器也一同滚动，才能让元素出现在浏览器窗口可视区域内。
页面锚点整理及使用scrollIntoView()导致导致整个页面上移问题处理
hetingtingitsme的博客
03-22 9804
常用场景：页面锚点，点击跳转页面某固定位置 1.element.scrollToView() （1）当页面有fixed顶部的布局时，由于fixed布局的元素脱离文档流，被scrollToView()的元素会被置顶到页面最顶部，导致部分被fixed布局的元素遮挡，因此不太适用。 （2）可用于页面没有fixed布局，常见的是顶部需要固定位置时可用element.scrollToVi...
vue滚动插件之 vue-srcollto
vscode_js的博客
07-26 1603
vue-srcollto 适用vue2.x和vue3.x
Vue3+ts 跳转页面 定位到某个位置 scrollIntoView 锚点滚动
03-28
可以通过以下方式在 Vue3 中实现跳转页面并定位到某个位置的滚动效果： 1. 在目标位置添加一个具有唯一标识的元素（例如 `<div id="target"></div>`），作为锚点。 2. 在跳转页面的组件中，引入 `ref` 和 `onMounted`，并使用 `scrollIntoView` 方法实现滚动： ```typescript <template> <div ref="target" id="target">目标位置</div> <button @click="scrollToTarget">跳转到目标位置</button> </template> <script lang="ts"> import { defineComponent, onMounted, ref } from 'vue' export default defineComponent({ setup() { const targetRef = ref(null) const scrollToTarget = () => { targetRef.value?.scrollIntoView({ behavior: 'smooth' }) } onMounted(() => { if (location.hash === '#target') { scrollToTarget() } }) return { targetRef, scrollToTarget, } }, }) </script> ``` 在 `onMounted` 钩子函数中判断当前页面是否包含 `#target` 锚点，如果有则执行 `scrollToTarget` 方法，实现自动滚动到目标位置的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值