vue中改变滚动条样式的方法

写在前面： 我是 扬帆向海，这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。

这博客是对自己学习的一点点总结及记录，如果您对 Java、算法 感兴趣，可以关注我的动态，我们一起学习。

用知识改变命运，让我们的家人过上更好的生活。

今天在自己开发的一个项目中，需求是让浏览器的滚动轴变细。想了好长时间才完成，在目前的测试中，滚动条在IE浏览器中不支持。

scrollbar.css

@charset "utf-8";
::-webkit-scrollbar
{
  width: 5px;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
  border-radius: 10px;
  background-color: rgba(0,0,0,0.1);
} 

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: rgba(0,0,0,0.1);
}

在 index.html中引入样式

<link rel="stylesheet" href="static/css/scrollbar.css" rel="external nofollow" >

方法二

1. 首先需要先下载我们所需要的模块，这里我用的是“vuescroll”

  //老规矩，先安装模块
  npm install vuescroll

2. 在项目中进行导入

  //main.js

  import vuescroll from 'vuescroll';
  import 'vuescroll/dist/vuescroll.css';
   Vue.use(vuescroll);

3. 引入(浏览器环境)

<!-- html -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuescroll"></script>
<!-- 引入vuescroll-slide -->
<script src="https://unpkg.com/vuescroll/dist/vuescroll-slide.js"></script>
<!-- 引入vuescroll-native -->
<script src="https://unpkg.com/vuescroll/dist/vuescroll-native.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/vuescroll/dist/vuescroll.css" rel="external nofollow" />

4. 使用

<!-- 组件的模板 -->
<template>
   <div class='your-container'>
      <!-- bind your configurations -->
      <vue-scroll :ops="ops" style="width:200px;height:100px">
        <ul class='your-content'>
          <li>dsfdsfdfg</li>
          <li>dsfdsfdfg</li>
          <li>dsfdsfdfg</li>
          <li>dsfdsfdfg</li>
          <li>dsfdsfdfg</li>
          <li>dsfdsfdfg</li>
          <li>dsfdsfdfg</li>
          <li>dsfdsfdfg</li>
          <li>dsfdsfdfg</li>
          <li>dsfdsfdfg</li>
          <li>dsfdsfdfg</li>
          <li>dsfdsfdfg</li>
        </ul>
      </vue-scroll>
    </div>
</template>

<!-- 组件的模型 -->
<script>
  export default {
    // 组件的名称
    name: "car",
    data() {
      return {
        ops: {
          vuescroll: {},
          scrollPanel: {},
          rail: {
            keepShow:true
          },
          bar: {
            hoverStyle: true,
            onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
            background: 'red',
          }
        },
      }
    },
  }
</script>

到此这篇关于vue中改变滚动条样式的方法的文章就介绍到这了,更多相关vue 改变滚动条样式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue修改滚动条样式的方法

    vue修改滚动条样式的方法

    目录 首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar. 注意, ::-webkit-scrollbar仅仅支持WebKit的浏览器(例如谷歌Chrome.苹果Safari). 其次还需要了解滚动条的一些组成: ::-webkit-scrollbar 滚动条整体部分,可以设置宽度等 ::-webkit-scrollbar-thumb 滚动条里面的滑块 ::-webkit-scrollbar-button 滚动条轨道两端的按钮,允许通过点击以微调滑块的位置 ::-webki

  • vue的滚动条插件实现代码

    vue的滚动条插件实现代码

    这篇文章主要介绍了vue的滚动条插件实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果如下 代码如下 <template> <div class="vue-scroll" ref="vueScrollW"> <div class="vue-scroll-w" ref="vueScroll" > <div class=&quo

  • Vue记住滚动条和实现下拉加载的完美方法

    滚动条 常见于移动端 App 在滚动点击进入的时候 问题描述 当我们在开发 web app 的时候,经常会遇到一个问题,就是当从一个可滚动的列表页进入到下一个详情页面,然后返回列表页面的时候,很难去还原滚动条的状态,无法记住进来时候的位置. 以前我尝试过很多方法: 有 vue-router 自带的 scrollBehavior,需要记住 scrollTop,然后还原,但是管理这个 scrollTop 显得很麻烦,有的时候还不容易取值还有使用纯 CSS 的方式,在列表页面放置一个 router-v

  • vue 框架下自定义滚动条(easyscroll)实现方法

    增加一个自定义滚动条插件: //插件采用jsx语法,使用前需要安装vue-jsx插件 npm install babel-plugin-syntax-jsx --save-dev npm install babel-plugin-transform-vue-jsx --save-dev npm install babel-helper-vue-jsx-merge-props --save-dev npm install babel-preset-es2015 --save-dev //更改.ba

  • vue实现一个滚动条样式

    vue实现一个滚动条样式

    起初是想修改浏览器滚动条样式来达到效果 但是查阅了资料 浏览器滚动条不能修改宽度与位置 没办法只能自己写 首先是滚动条样式 <div class="scrollBar" v-if="roleList.length > 5"> <div class="box" @mousedown="move" v-bind:style="{ width: activewidth + 'px' }"

  • vue实现两个区域滚动条同步滚动

    vue实现两个区域滚动条同步滚动

    本文实例为大家分享了vue实现两个区域滚动条同步滚动的具体代码,供大家参考,具体内容如下 项目开发中,遇到一个比较两个form差异的需求,但当item过多就需要滚动条,这里就用到了滚动条同步的地方,其实原理和git的差异比较差不多,这里来做一下分析. 这是效果图: 要点分析: 其实主要是通过ref属性来操控两个div的scrollTop属性 <div class="customer-span" ref="systemForm" @scroll="sy

  • Vue实现渲染数据后控制滚动条位置(推荐)

    需求场景如下: 实现了消息发送,如果容器内消息过多,会出现滚动条,最新的消息位于最底部,不能及时出现在可视区域内,此时就需要在渲染列表后,将滚动条的位置定位到最底部.先来看看最终实现的效果 实现思路 渲染完数据后,通过refs对象获取消息容器的实际高度 将滚动条的设置到最底部 实现过程 sendMessage: function (event) { // 数据渲染 this.senderMessageList.push(thisSenderMessageObj); // 改变滚动条位置 this

  • Vue.js桌面端自定义滚动条组件之美化滚动条VScroll

    Vue.js桌面端自定义滚动条组件之美化滚动条VScroll

    前言 前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue2.x开发的网页端轻量级超小巧自定义美化滚动条组件.支持是否原生滚动条.鼠标移出是否自动隐藏.自定义滚动条尺寸及颜色等功能. 组件在设计开发之初借鉴了 el-scrollbar 及 vuebar 等组件设计思想. 通过简单的标签写法<v-scroll>...</v-scroll> 即可快速生成一个漂亮的替换原生滚动条. 参数配置 props:

  • vue中改变滚动条样式的方法

    写在前面: 我是 扬帆向海,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法 感兴趣,可以关注我的动态,我们一起学习. 用知识改变命运,让我们的家人过上更好的生活. 今天在自己开发的一个项目中,需求是让浏览器的滚动轴变细.想了好长时间才完成,在目前的测试中,滚动条在IE浏览器中不支持. scrollbar.css @charset "utf-8"; ::-webkit-s

  • vue中element组件样式修改无效的解决方法

    如下所示: <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写style注意不加scoped,然后用一个组件最外层的class包裹住,就不会改到所有的组件的样式了. 以上这篇vue中element组件样式修改无效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue 组件间的样式冲突污染 浅谈vue中改elementUI默认样式引发的st

  • vue中改变选中当前项的显示隐藏或者状态的实现方法

    在vue中已经不像jq那样直接操作dom了,如果要指向当前选中项时,就不能再用jq的思路来做了,方法如下: 当指向一个状态的时候,只让指向的状态隐藏,其他项不变,如果项目中用了element-ui,那么操作起来会比较简单一些,这样设置: v-if="(row.id == currentId&&row.auditState==0)?checkState:!checkState" @mouseover="statehidden(row.id)" js中:

  • Vue修改mint-ui默认样式的方法

    在使用vue框架开发时,饿了么的mint-ui框架是个不错的选择,但是有时候我们需要修改它的默认样式,方法如下: 1.在src/assets/css目录下新建scss文件,my-mint.scss,内容如下: /* 覆盖mint-ui的primary颜色,改为自己UI的主题色 */ $color-primary: #05AFAF; .mint-header { background-color: $color-primary; } .mint-button:not(.is-disabled):a

  • Vue 中使用 CSS Modules优雅方法

    CSS Modules:局部作用域 & 模块化 CSS Modules 为每一个局部类赋予全局唯一的类名,这样组件样式间就不会相互影响了.如: /* button.css */ .button { font-size: 16px; } .mini { font-size: 12px; } 它会被转换为类似这样: /* button.css */ .button__button--d8fj3 { font-size: 16px; } .button__mini--f90jc { font-size

  • 详解Vue中的scoped及穿透方法

    scoped的由来 css一直有个令人困扰的作用域问题:即使是模块化编程下,在对应的模块的js中import css进来,这个css仍然是全局的.为了避免css样式之间的污染,vue中引入了scoped这个概念. 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件.通过设置该属性,使得组件之间的样式不互相污染.如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化. 但是这

  • vue中使用props传值的方法

    1.静态传值(在父组件中赋值好props中属性的值传递给子组件) 父组件 <template> <div> <input v-model="message"> <child message="hello"></child> </div> </template> <script> import child from './components/child.vue' expo

  • jquery实现动态改变css样式的方法分析

    本文实例讲述了jquery实现动态改变css样式的方法.分享给大家供大家参考,具体如下: jquery 几乎成了现在开发WEB应用的标准JS库,这与其简单性和易用性是分不开的.作为一个后端开发人员,要做一些前端页面时,CSS 样式的控制是少不了需要掌握的.如果是静态的CSS,当然是可以直接写上去的,但有些界面是需要一些动态效果的,比如颜色变化,字体大小变化,甚至DIV 的隐藏于现实等,这些都需要用javascript 动态控制其CSS样式,下面就常用的jquery 控制 css 样式的方法做一个

随机推荐