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

    1、滚动条自定义样式

            1-1、设定全局样式

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

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

    1. /*滚动条样式*/
    2. ::-webkit-scrollbar {
    3.     background: #eee;
    4.     width: 8px;
    5. }
    6. /*滚动条轨道的样式*/
    7. ::-webkit-scrollbar-track {
    8.     background: coral;
    9.     width: 8px;
    10. }
    11. /*滚动条滑块的样式*/
    12. ::-webkit-scrollbar-thumb {
    13.     background: red;
    14.     width: 8px;
    15.     border-radius: 4px;
    16. }

                    代码实例演示：

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.     <style>
    9.       ::-webkit-scrollbar {
    10.         background: coral;
    11.         width: 8px;
    12.       }
    13.       ::-webkit-scrollbar-thumb {
    14.         background: yellow;
    15.         width: 8px;
    16.         border-radius: 4px;
    17.       }
    18.       .scrollbox {
    19.         margin: 0 auto;
    20.         width: 640px;
    21.         height: 480px;
    22.         overflow: auto;
    23.         line-height: 100px;
    24.         text-align: center;
    25.         font-size: 38px;
    26.         background-color: rgb(89, 191, 238);
    27.       }
    28.     style>
    29.   head>
    30.  
    31.   <body>
    32.       <div class="scrollbox ">
    33.         <div class="title">xdiv>
    34.         <div class="title">idiv>
    35.         <div class="title">bdiv>
    36.         <div class="title">idiv>
    37.         <div class="title">ndiv>
    38.         <div class="title">gdiv>
    39.         <div class="title">-div>
    40.         <div class="title">Gdiv>
    41.       div>
    42.       <br />
    43.       <div class="scrollbox ">
    44.         <div class="title">xdiv>
    45.         <div class="title">idiv>
    46.         <div class="title">bdiv>
    47.         <div class="title">idiv>
    48.         <div class="title">ndiv>
    49.         <div class="title">gdiv>
    50.         <div class="title">-div>
    51.         <div class="title">Gdiv>
    52.       div>
    53.   body>
    54. html>

             1-2、设定局部样式

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

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

                    代码实例演示：

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.     <style>
    9.       .scrollbox {
    10.         margin: 0 auto;
    11.         width: 640px;
    12.         height: 480px;
    13.         overflow: auto;
    14.         line-height: 100px;
    15.         text-align: center;
    16.         font-size: 38px;
    17.         background-color: rgb(89, 191, 238);
    18.       }
    19.       .scro1::-webkit-scrollbar {
    20.         background: coral;
    21.         width: 8px;
    22.       }
    23.       .scro1::-webkit-scrollbar-thumb {
    24.         background: yellow;
    25.         width: 8px;
    26.         border-radius: 4px;
    27.       }
    28.  
    29.       .scro2::-webkit-scrollbar {
    30.         background: orange;
    31.         width: 18px;
    32.         border-radius: 9px;
    33.       }
    34.       .scro2::-webkit-scrollbar-thumb {
    35.         width: 18px;
    36.         border-radius: 9px;
    37.         background: green;
    38.       }
    39.     style>
    40.   head>
    41.  
    42.   <body>
    43.     <div class="scrollbox scro1">
    44.       <div class="title">xdiv>
    45.       <div class="title">idiv>
    46.       <div class="title">bdiv>
    47.       <div class="title">idiv>
    48.       <div class="title">ndiv>
    49.       <div class="title">gdiv>
    50.       <div class="title">-div>
    51.       <div class="title">Gdiv>
    52.     div>
    53.     <br />
    54.     <div class="scrollbox scro2">
    55.       <div class="title">xdiv>
    56.       <div class="title">idiv>
    57.       <div class="title">bdiv>
    58.       <div class="title">idiv>
    59.       <div class="title">ndiv>
    60.       <div class="title">gdiv>
    61.       <div class="title">-div>
    62.       <div class="title">Gdiv>
    63.     div>
    64.   body>
    65. html>

             1-3、提示：

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

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

    1. /*IE浏览器⬇*/
    2. /*三角箭头的颜色*/   
    3. scrollbar-arrow-color:; 
    4. /*立体滚动条的颜色*/
    5. scrollbar-face-color:;  
    6. /*立体滚动条亮边的颜色*/  
    7. scrollbar-3dlight-color:;
    8. /*滚动条空白部分的颜色*/     
    9. scrollbar-highlight-color:;  
    10. /*立体滚动条阴影的颜色*/    
    11. scrollbar-shadow-color:;
    12. /*立体滚动条强阴影的颜色*/   
    13. scrollbar-darkshadow-color:; 
    14. /*立体滚动条背景颜色*/ 
    15. scrollbar-track-color:;
    16. /*滚动条的基本颜色*/    
    17. scrollbar-base-color:; 
    18.  
    19. /*火狐浏览器⬇*/
    20. /*滚动条滑块、轨道的颜色设置*/
    21. scrollbar-color: coral yellow; 
    22. /*滚动条宽度 auto thin none*/
    23. scrollbar-width: ;

    2、隐藏滚动条

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

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

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

    1. .demo::-webkit-scrollbar {
    2. display: none; /* Chrome Safari */
    3. }
    4.  
    5. .demo {
    6. scrollbar-width: none; /* firefox /
    7. -ms-overflow-style: none; / IE 10+ */
    8. overflow-y: auto;
    9. }

                    代码实例演示： 

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.     <style>
    9.       .scrollbox {
    10.         margin: 0 auto;
    11.         width: 640px;
    12.         height: 480px;
    13.         overflow: auto;
    14.         line-height: 100px;
    15.         text-align: center;
    16.         font-size: 38px;
    17.         background-color: rgb(89, 191, 238);
    18.       }
    19.       .scro1::-webkit-scrollbar {
    20.         display: none;/* Google */
    21.       }
    22.       .scro1 {
    23.         scrollbar-width: none; /* firefox */
    24.         -ms-overflow-style: none; /* IE 10+ */
    25.       }
    26.     style>
    27.   head>
    28.  
    29.   <body>
    30.     <div class="scrollbox scro1">
    31.       <div class="title">xdiv>
    32.       <div class="title">idiv>
    33.       <div class="title">bdiv>
    34.       <div class="title">idiv>
    35.       <div class="title">ndiv>
    36.       <div class="title">gdiv>
    37.       <div class="title">-div>
    38.       <div class="title">Gdiv>
    39.     div>
    40.   body>
    41. html>

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

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

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <title>Titletitle>
    6.     <style>
    7.       #box {
    8.         width: 530px;
    9.         height: 680px;
    10.         overflow: hidden;
    11.       }
    12.       iframe {
    13.         width: 530px;
    14.         height: 100%;
    15.       }
    16.     style>
    17.   head>
    18.   <body>
    19.     <div id="box">
    20.       <iframe
    21.         marginwidth="0"
    22.         marginheight="0"
    23.         src="transitiondemo.html"
    24.         frameborder="0"
    25.       >iframe>
    26.     div>
    27.   body>
    28. html>

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

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

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

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

    1. <template>
    2.   <div class="scroll-box">
    3.     
    4.     <div class="header">here is headerdiv>
    5.     
    6.     <aside>
    7.       <li
    8.         v-for="(item, index) in asideItem"
    9.         :key="item"
    10.         @click="scrollTo(index)"
    11.       >
    12.         {{ item }}
    13.       li>
    14.     aside>
    15.     
    16.     <div class="content">
    17.       <div class="con-item" v-for="item in asideItem" :key="item">
    18.         {{ item }}
    19.       div>
    20.     div>
    21.   div>
    22. template>
    23.  
    24. <script>
    25. export default {
    26.   name: 'scrollIntoView',
    27.   data() {
    28.     return {
    29.       asideItem: ['google', 'uc', 'IE', 'firefox', '360', 'liebao']
    30.     };
    31.   },
    32.   methods: {
    33.     scrollTo(index) {
    34.       document.querySelectorAll('.con-item')[index].scrollIntoView({
    35.         behavior: 'smooth',
    36.         block: 'start',
    37.         inline: 'nearest'
    38.       });
    39.     }
    40.   }
    41. };
    42. script>
    43.  
    44. <style lang="less">
    45. .scroll-box {
    46.   width: 100%;
    47.   height: 100%;
    48. }
    49. .header {
    50.   position: fixed;
    51.   top: 0;
    52.   left: 0;
    53.   width: 100%;
    54.   height: 100px;
    55.   line-height: 100px;
    56.   font-size: 36px;
    57.   background: coral;
    58.   opacity: 0.6;
    59. }
    60. aside {
    61.   position: fixed;
    62.   right: 0;
    63.   bottom: 100px;
    64.   width: 80px;
    65.   height: 200px;
    66.   background: yellow;
    67.   & > li:hover {
    68.     cursor: pointer;
    69.   }
    70.   /*因为content给与固定定位，为了让侧边栏不被遮盖得提高层级*/
    71.   z-index: 999;
    72. }
    73. .content {
    74.   width: 100%;
    75.   height: 750px;
    76.   overflow-y: scroll;
    77.   border: 2px dashed darksalmon;
    78.   margin: 0 auto;
    79.   position: fixed;
    80.   top: 100px;
    81.   overflow-y: scroll;
    82.   & > div {
    83.     width: 100%;
    84.     height: 500px;
    85.     line-height: 500px;
    86.     text-align: center;
    87.     font-size: 36px;
    88.   }
    89.   & > div:nth-child(2n) {
    90.     background: burlywood;
    91.   }
    92.   /*不显示滚动条——上文有介绍了*/
    93.   &::-webkit-scrollbar {
    94.     display: none; /* Chrome Safari */
    95.   }
    96. }
    97. li {
    98.   line-height: 30px;
    99. }
    100. style>

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

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

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

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

    1. ## npm安装
    2. npm install --save vue-scrollto
    3. ## yarn安装
    4. yarn add vue-scrollto

                    看全局配置

    1. import Vue from 'vue';
    2. import App from './App.vue';
    3. const VueScrollTo = require('vue-scrollto');
    4. Vue.use(VueScrollTo, {
    5.   container: 'document', // 滚动元素
    6.   duration: 500, // 动画时长
    7.   easing: 'ease', // 动画曲线
    8.   offset: 100, // 滚动终点距离父元素顶部距离
    9.   force: true, // 强制立即执行，即便元素是可见的
    10.   cancelable: true,
    11.   onStart: false,
    12.   onDone: false,
    13.   onCancel: false,
    14.   x: false, // x 轴禁止滚动
    15.   y: true
    16. });
    17. new Vue({
    18.   render: function(h) {
    19.     return h(App);
    20.   }
    21. }).$mount('#app1');
    this.$scrollTo(element, duration, options)

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

    1. <template>
    2.   <div id="app">
    3.     <div class="flex-box">
    4.       <div class="flex-l">
    5.         <ul class="jumpbtn">
    6.          
    7.          
    8.           <li class="btn" v-for="item in boxs" :key="item.id">
    9.             <a href="#" v-scroll-to="'#' + item.id">
    10.               {{ item.id + item.title }}
    11.             >
    12.           li>
    13.         ul>
    14.       div>
    15.       <div class="flex-r">
    16.         <scroll-page
    17.           v-for="item in boxs"
    18.           :key="item.id"
    19.           :id="item.id"
    20.           :title="item.id + item.title"
    21.         />
    22.       div>
    23.     div>
    24.   div>
    25. template>
    26.  
    27. <script>
    28. export default {
    29.   name: "App",
    30.   data() {
    31.     return {
    32.       boxs: [
    33.         { id: "bt-1", title: "Anita" },
    34.         { id: "bt-2", title: "Anita" },
    35.         { id: "bt-3", title: "Anita" },
    36.         { id: "bt-4", title: "Anita" },
    37.         { id: "bt-5", title: "Anita" },
    38.         { id: "bt-6", title: "Anita" },
    39.         { id: "bt-7", title: "Anita" },
    40.       ],
    41.     };
    42.   },
    43. };
    44. script>
    45.  
    46. <style>
    47. a {
    48.   text-decoration: none;
    49. }
    50. li {
    51.   list-style: none;
    52. }
    53. #app {
    54.   font-family: "仿宋";
    55.   -webkit-font-smoothing: antialiased;
    56.   -moz-osx-font-smoothing: grayscale;
    57.   text-align: center;
    58.   color: #2c3e50;
    59.   margin-top: 60px;
    60. }
    61. .flex-box {
    62.   display: flex;
    63.   flex-direction: row;
    64.   border: 1px solid salmon;
    65. }
    66. .flex-l {
    67.   width: 20%;
    68.   position: fixed;
    69.   top: 100px;
    70.   right: 0px;
    71.   border: 1px dashed yellowgreen;
    72. }
    73. .flex-r {
    74.   width: 80%;
    75. }
    76. style>

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

    1. <template>
    2.   <div class="scrollDemo">
    3.     <div class="demoNav flex-center-center">
    4.       <div
    5.         class="demoNavItem"
    6.         v-for="(item, index) in demoNavItem"
    7.         :key="index"
    8.         :class="{ navActive: idx == index }"
    9.         @click="changNav(index)"
    10.       >
    11.         {{ item }}
    12.       div>
    13.     div>
    14.     <div class="demoContent">
    15.       
    16.       <div class="demoItem0 demoItem" id="demoItem0">googlediv>
    17.       <div class="demoItem1 demoItem" id="demoItem1">ucdiv>
    18.       <div class="demoItem2 demoItem" id="demoItem2">IEdiv>
    19.       <div class="demoItem3 demoItem" id="demoItem3">firefoxdiv>
    20.       <div class="demoItem4 demoItem" id="demoItem4">360div>
    21.       <div class="demoItem5 demoItem" id="demoItem5">liebaodiv>
    22.     div>
    23.   div>
    24. template>
    25. <script>
    26. // 引入
    27. var VueScrollTo = require("vue-scrollto");
    28. export default {
    29.   data() {
    30.     return {
    31.       idx: 0,
    32.       demoNavItem: [
    33.         "google",
    34.         "uc",
    35.         "IE",
    36.         "firefox",
    37.         "360",
    38.         "liebao",
    39.       ],
    40.     };
    41.   },
    42.   methods: {
    43.     // 点击导航后触发
    44.     changNav(index) {
    45.       console.log(this)
    46.       this.idx = index;
    47.       // 通过VueScrollTo调用内置scrollTo方法实现滚动效果
    48.       VueScrollTo.scrollTo(document.getElementById("demoItem" + index), 1000, {
    49.         offset: -70,
    50.       });
    51.     },
    52.   },
    53. };
    54. script>
    55. <style scoped>
    56. .flex-center-center {
    57.   display: flex;
    58.   align-items: center;
    59.   justify-content: center;
    60. }
    61. .demoNav {
    62.   width: 100%;
    63.   height: 70px;
    64.   background: rgb(247, 183, 153);
    65.   /* 浏览器窗口顶部 */
    66.   position: fixed;
    67.   /* position: sticky; */
    68.   left: 0;
    69.   top: 0;
    70. }
    71. .demoNavItem {
    72.   font-size: 40px;
    73.   color: #fff;
    74.   margin-left: 30px;
    75.   cursor: pointer;
    76. }
    77. .navActive {
    78.   color: rgb(36, 39, 204);
    79. }
    80. .demoItem {
    81.   width: 100%;
    82.   height: 600px;
    83.   font-size: 60px;
    84.   color: #fff;
    85.   text-align: center;
    86.   padding: 60px 0 0 0;
    87. }
    88. .demoItem0 {
    89.   background: rgba(255, 61, 61, 0.945);
    90. }
    91. .demoItem1 {
    92.   background: rgb(250, 159, 40);
    93. }
    94. .demoItem2 {
    95.   background: rgb(238, 255, 0);
    96. }
    97. .demoItem3 {
    98.   background: rgb(63, 247, 7);
    99. }
    100. .demoItem4 {
    101.   background: rgb(21, 114, 253);
    102. }
    103. .demoItem5 {
    104.   background: rgb(248, 6, 248);
    105. }
    106. style>

     

  • 相关阅读:
    Vue路由介绍及使用
    【网络协议】聊聊DNS协议如何域名解析和负载均衡
    grid布局之项目属性grid-column&grid-row
    LSF集群基本概念介绍
    OpenMV与STM32之间的通信（附源码）
    Docker02基本管理
    在vs中创建linux项目
    基于内容的图像检索系统设计与实现--颜色信息--纹理信息--形状信息--PHASH--SHFT特征点的综合检测项目，包含简易版与完整版的源码及数据！
    记一次简单的js逆向分析
    Stearic acid-PEG-FITC 硬脂酸-聚乙二醇-荧光素
  • 原文地址：https://blog.csdn.net/qq_38800316/article/details/126675790