页面滚动那些事儿（滚动条样式自定义，隐藏滚动条，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
版权

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列表如何实现滚动到指定位置样式改变效果
11-21
这个需求大概是这样子： 我做的一个聊天Demo，在搜索框搜索用户，可以滚动到指定的用户。然后成选中状态。 这是目前状态，我搜索南宫仆射 ，想要下面的用户列表直接滚动到南宫仆射并改变CSS样式。 查询之后是这个子： 嗯，我的思路： 在搜索框搜索到用户之后会返回一个用户对象，之后会调用列表的点击事件，改变CSS样式及做一些聊天的逻辑。然后需要获取到列表对应的id值，直接使用 document.getElementById(it).scrollIntoView(); 具体实现： 列表：使用vue的v-for指令 ，这里的id值使用的是遍历的索引值，外层是一个自定义滚动条组件。样式也是使用vue指
scrollIntoView跳转被遮挡的方法
weixin_54720502的博客
05-05 753
如果scrollIntoView不管用的时候，还有一个跳转的方式，先算出元素所在的位置，通过getBoundingClientRect（获取元素的位置和尺寸）。ps：例如,var distanceToViewportTop = divRect.top - '70';scrollIntoView最长用的案例是在跳转到某一个位置，可是区域的最顶部。可以用 document.documentElement.scrollTop -= '多少值';
Vue内容过多隐藏侧边滚动条，几行代码解决！
最新发布
MyZy_的博客
06-12 121
Vue内容过多隐藏侧边滚动条
使用scrollIntoView和监听滚动区域子div的相对于视口的顶部的距离，来实现导航定位功能
slom_fxt的博客
03-21 2843
使用scrollIntoView和监听滚动区域子div的相对于视口的顶部的距离，来实现导航定位功能
页面滚动到指定位置——js中scrollIntoView()的用法
yehaocheng520的博客
05-23 1万+
页面滚动到指定位置——js中scrollIntoView()的用法
vue平滑滚动到指定位置
Y丶小琪
03-09 2874
需求：锚点导航问题，点击导航跳到对应的模块，两种方式 1.滚动盒子滚动到指定高度 scrollTo（offsetTop每个模块顶部距离可滚动盒子的顶部偏移的像素值） goAnthor (selector) { const height = document.querySelector(selector).offsetTop const container = document.querySelector('.scroll-wrap') container.s
scrollIntoView()滚动得位置有差异
ITKEP的博客
03-17 2774
通过querySelector()方法获取元素，并调用scrollIntoView()方法将其滚动到可视区域内。然后，获取父容器的滚动距离，并根据子元素的位置，计算出子元素相对于父容器的滚动距离，在调用父容器的scrollTo()方法来实现。如果调用该方法之后，元素没有滚动到指定的位置，有可能是因为调用的不正确，也有可能是元素所在的父容器存在滚动条，导致滚动到了父容器的可视区域内。如果元素所在的父容器存在滚动条，可能需要将父容器也一同滚动，才能让元素出现在浏览器窗口可视区域内。
页面锚点整理及使用scrollIntoView()导致导致整个页面上移问题处理
hetingtingitsme的博客
03-22 9815
常用场景：页面锚点，点击跳转页面某固定位置 1.element.scrollToView() （1）当页面有fixed顶部的布局时，由于fixed布局的元素脱离文档流，被scrollToView()的元素会被置顶到页面最顶部，导致部分被fixed布局的元素遮挡，因此不太适用。 （2）可用于页面没有fixed布局，常见的是顶部需要固定位置时可用element.scrollToVi...
vue滚动插件之 vue-srcollto
vscode_js的博客
07-26 1604
vue-srcollto 适用vue2.x和vue3.x
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
scrollIntoView 与 scrollIntoViewIfNeeded API 介绍
热门推荐
樊小书生
06-12 2万+
本文转自：scrollIntoView 与 scrollIntoViewIfNeeded API 介绍 根据 MDN 的描述，Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域...
vue div滚动条滚动到指定位置_这些Vue自定义指令，让你的项目开发爽到爆
weixin_39762075的博客
11-20 4192
受 AngularJS 的启发，Vue 内置了一些非常有用的指令(比如v-html和v-once等)，每个指令都有自身的用途。完整的指令列表可以在这里查看.这还没完，更棒的是可以开发自定义指令。Vue.js 社区因此得以通过发布自定义指令npm 包，解决了无数的代码问题。以下就是我最喜欢的 Vue.js 自定义指令列表。不用说，这些指令为我的项目开发节省了大量时间！?1. V-Hot...
scrollIntoView()，滚动到指定区域
qq_38906234的博客
12-10 8082
滚动到指定区域 Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。 element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean型参数 element.scrollIntoView(scrollIn...
关于scrollTop的兼容问题
二次猿的博客
11-17 841
1、各浏览器下 scrollTop的差异
scrollintoview方法滚动距离顶部距离
weixin_55932347的博客
04-26 1031
方法是 DOM API 的一部分，用于将元素滚动到视图中。这个方法接收一个布尔值参数。，指示是否需要滚动到视图的顶部。
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
scroll 元素滚动到指定位置(包含app和网页）
bai_shuang的博客
06-15 5006
VueScrollTo是一个基于Vue的平滑滚动插件，实现网页中元素点击后平滑滚动到目标位置的效果。在很多情况下，我们需要在网页中使用锚点链接，但是默认的锚点跳转方式可能会出现跳动或者瞬间跳转的情况，使用VueScrollTo可以避免这些问题。接下来将从以下几个方面详细介绍VueScrollTo的使用方法。
VUE 使用 VueScrollTo 添加锚点跳转
﹏゛Aeljinh陌琳的博客
05-11 1690
一、引入 npm install --save vue-scrollto // main.js import Vue from 'vue' var VueScrollTo = require('vue-scrollto'); Vue.use(VueScrollTo) 二、使用 // xxx.vue //template <el-table :data="data" height="244" stripe :row-class-name="tableRowClassName" v-loading="
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、付费专栏及课程。

余额充值