精华内容
下载资源
问答
  • 2021-11-09 11:47:02

    iframe修改滚动条样式

    因为用iframe来展示第三方网页,所以无法修改里面的滚动条样式,于是想到获取第三方网页的高度,然后赋值给iframe标签,使iframe高度自适应,然后在最外层放一个div,通过设置div的高度和滚动条样式达到类似效果。

    <div class="input-box-iframe">
                <iframe :src="result" id="iframe" :height="height" width="1000" scrolling="no" name="demo"  @load="loaded"></iframe>
    </div>
    

    监听iframe是否加载完毕

    mounted() {  
            const iframe = document.querySelector('#iframe')
            if (iframe.attachEvent) {
                iframe.attachEvent('onload', function () {
                // iframe加载完毕以后执行操作
                console.log('iframe已加载完毕',document.getElementsByTagName('iframe')[0])
             })
            }else {
                iframe.onload = function () {
                    setTimeout(()=>{
                        //获取第三方页面的高度
                        console.log('iframe已加载完毕!',document.getElementsByTagName('iframe')[0].ownerDocument.body.clientHeight)
                        this.height = document.getElementsByTagName('iframe')[0].ownerDocument.body.clientHeight + 200
                    console.log(document.getElementsByTagName('iframe'));
                    },1000)
                }
            }
            },
    

    设置滚动条样式和外层div样式

    ::-webkit-scrollbar-thumb {
        position: relative;
        display: block;
        cursor: pointer;
        border-radius: .375rem;
        background-color: rgba(144,147,153,.3);
        -webkit-transition: background-color .3s;
        transition: background-color .3s;
        }
        ::-webkit-scrollbar {
            width: .625rem;
            height: .625rem;
        }
        .input-box-iframe{
            width: 1000px;
            height: 600px;
            overflow-y: scroll;
            overflow-x: hidden;
            margin: 0 auto;
            margin-bottom: 1.25rem; 
        }
    
    更多相关内容
  • 主要介绍了vue改变滚动条样式的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue修改滚动条样式的方法

    千次阅读 2022-03-22 18:00:35
    这篇文章主要介绍了vue修改滚动条样式,首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar。下面来看看文章内容的具体实现吧 目录 首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar。 注意,::...

    这篇文章主要介绍了vue修改滚动条样式,首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar。下面来看看文章内容的具体实现吧

    目录

    首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar

    注意, ::-webkit-scrollbar仅仅支持WebKit的浏览器(例如谷歌Chrome、苹果Safari)。

    其次还需要了解滚动条的一些组成:

    • ::-webkit-scrollbar 滚动条整体部分,可以设置宽度等
    • ::-webkit-scrollbar-thumb 滚动条里面的滑块
    • ::-webkit-scrollbar-button 滚动条轨道两端的按钮,允许通过点击以微调滑块的位置
    • ::-webkit-scrollbar-track 滚动条的轨道(里面装有thumb)
    • ::-webkit-scrollbar-track-piece 滚动条没有滑块的轨道部分
    • ::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时的交汇处
    • ::-webkit-resizer 某些元素的corner部分(如textarea的可拖动按钮)

    对此有了一些了解之后就可以上手滚动条样式的修改了。

    代码实现:

    <ul class="nav-tabs-scroll">
      <li v-for="(item,index) in tabs" :key="index" class="nav-item-scroll">{
    <!-- -->{item.text}}</li>
    </ul>
    <v-textarea outlined v-model="text" style="width: 200px; margin: 16px;" class="text"></v-textarea>
    
    
    
    data: () => ({
          tabs: [
            { value: 4001, text: 'Loan Log', code: 'LOAN_LOG' },
            { value: 4002, text: 'Document Log', code: 'DOCUMENT_LOG' },
            { value: 4003, text: 'Note Log', code: 'NOTE_LOG' },
            { value: 4004, text: 'Operation Log', code: 'OPERATION_LOG' },
            { value: 4005, text: 'Payment Log', code: 'PAYMENT_LOG' },
            { value: 4006, text: 'Maintenance Log', code: 'MAINTENANCE_LOG' },
            { value: 4007, text: 'Transaction Log', code: 'TRANSACTION_LOG' },
            { value: 4008, text: 'Collection Log', code: 'COLLECTION_LOG' },
            { value: 4001, text: 'Loan Log', code: 'LOAN_LOG' },
            { value: 4002, text: 'Document Log', code: 'DOCUMENT_LOG' },
            { value: 4003, text: 'Note Log', code: 'NOTE_LOG' },
            { value: 4004, text: 'Operation Log', code: 'OPERATION_LOG' },
            { value: 4005, text: 'Payment Log', code: 'PAYMENT_LOG' },
            { value: 4006, text: 'Maintenance Log', code: 'MAINTENANCE_LOG' },
            { value: 4007, text: 'Transaction Log', code: 'TRANSACTION_LOG' },
            { value: 4008, text: 'Collection Log', code: 'COLLECTION_LOG' },
            { value: 4001, text: 'Loan Log', code: 'LOAN_LOG' },
            { value: 4002, text: 'Document Log', code: 'DOCUMENT_LOG' },
            { value: 4003, text: 'Note Log', code: 'NOTE_LOG' },
            { value: 4004, text: 'Operation Log', code: 'OPERATION_LOG' },
            { value: 4005, text: 'Payment Log', code: 'PAYMENT_LOG' },
            { value: 4006, text: 'Maintenance Log', code: 'MAINTENANCE_LOG' },
            { value: 4007, text: 'Transaction Log', code: 'TRANSACTION_LOG' },
            { value: 4008, text: 'Collection Log', code: 'COLLECTION_LOG' }
          ],
          text: ''
        }),
    
    
    
    <style lang="scss" scoped>
      .nav-tabs-scroll {
        height: 100px;
        list-style: none;
        margin: 0px;
        padding: 16px 0;
        overflow-x: auto;
        display: inline-block;
        white-space: nowrap;
        width: 100%; 
        background: #F9FAFD;
      }
      .nav-item-scroll {
        background: #E5F0FF;
        color: #24252E;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        padding: 8px 8px 180px;
        text-align: center;
        display: inline;
        margin: 0 4px 0;
        border-radius: 16px;
      }
      .nav-tabs-scroll::-webkit-scrollbar {
        width: 20px;
        height: 10px;
      }
      .nav-tabs-scroll::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: red;
      }
      .nav-tabs-scroll::-webkit-scrollbar-button {
        width: 10px;
        border-radius: 50%;
        background: black;
      }
      .nav-tabs-scroll::-webkit-scrollbar-track {
        box-shadow: inset 0 0 2px #333;
        border-radius: 5px;
        background: blue;
      }
      .nav-tabs-scroll::-webkit-scrollbar-corner {
        background: springgreen;
      }
      /*
      .nav-tabs-scroll::-webkit-scrollbar-track-piece {
        box-shadow: inset 0 0 2px #333;
        border-radius: 5px;
        background: plum;
      }
      */
    </style>
    <style>
      .text.v-textarea textarea::-webkit-resizer {
        background: pink;
      }
    </style>
    
    
    

    默认的样式:

    修改后的样式:

    到此这篇关于vue修改滚动条样式的方法的文章就介绍到这了。 

     

    展开全文
  • vue修改滚动条样式

    2020-09-11 17:50:53
    代码: <style> /deep/::-webkit-scrollbar { width: 8px; height: 8px; background-color: #062d56; } /deep/::-webkit-scrollbar-thumb { background-color: #2a79c0; ......

    代码:

    <style>
    	/deep/::-webkit-scrollbar {
    		width: 8px;
    		height: 8px;
    		background-color: #062d56;
    	}
    	/deep/::-webkit-scrollbar-thumb {
    		background-color: #2a79c0;
    		border-radius: 3px;
    	}
    </style>

    实现效果:

    注意:此代码只适用于谷歌浏览器

    展开全文
  • vue 改变滚动条样式

    2021-11-15 09:28:36
    .stageContent { &::-webkit-scrollbar { width: 8px; height: 10px; } &::-webkit-scrollbar-track { background: none; } &::-webkit-scrollbar-thumb { border-radius: 10px;...}

    在这里插入图片描述

    .stageContent {
      &::-webkit-scrollbar {
        width: 8px;
        height: 10px;
      }
      
      &::-webkit-scrollbar-track {
        background: none;
      }
      
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #405781;
    
      }
    }
    
    展开全文
  • vue修改滚动条样式

    2021-11-18 14:58:13
    首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar。 注意,::-webkit-scrollbar仅仅支持WebKit的浏览器(例如谷歌Chrome、苹果Safari)。 其次还需要了解滚动条的一些组成: ::-webkit-scrollbar 滚动条整体...
  • 前言:在Vue项目中会有使用到滚动条的情况,但是会遇到原生滚动条的样式不满足UI设计,因此需要改变滚动条样式,下面使用两种方式来修改滚动条的样式,以Vue项目举例 1.第一种利用Element UI 在Vue2.x的项目中...
  • vue修改默认滚动条样式

    千次阅读 2022-03-10 17:23:16
    关于默认滚动条样式太丑这件事儿 <template> <div class="init"> <el-row class="title"> <p>我是标题</p> </el-row> <el-row class="msg"> <textarea class=...
  • vue项目中改变浏览器滚动条样式,推荐一个超级好用的vue组件: vuescroll.js
  • vue 设置滚动条样式

    千次阅读 2020-07-07 16:30:17
    vue 设置滚动条样式 //在index文件中 /* @charset "utf-8"; */ ::-webkit-scrollbar { width: 5px; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { border-radius: 10px; background-...
  • vue项目修改滚动条样式

    万次阅读 2018-09-20 17:24:06
    vue项目修改滚动条样式 这是我写的一个简单的效果,只是为了实现功能,具体样式样式可以根据自己的需求去写。 1. 首先需要先下载我们所需要的模块,这里我用的是“vuescroll” //老规矩,先安装模块 npm ...
  • 滚动条宽度 .el-table__body-wrapper::-webkit-scrollbar { width: 3px; height: 5px !important; } 颜色 .el-table__body-wrapper::-webkit-scrollbar-thumb { border-radius: 4px; background: #fff !...
  • antd-vue table滚动条样式修改

    千次阅读 2022-04-11 15:48:13
    // 滚动条背景颜色 .ant-table-body::-webkit-scrollbar, .info::-webkit-scrollbar { height: 9px; width: 9px; background-color: #4d64bd; } // 滚动条颜色 .ant-table-body::-webkit-scrollbar-thumb, .info...
  • vue改变滚动条样式(CSS3)

    千次阅读 2019-09-11 17:14:44
    滚动条样式: ::-webkit-scrollbar ——> 滚动条整体部分 ::-webkit-scrollbar-thumb ——> 滚动条里面的小方块,能向上向下移动(或向左向右移动,取决于是垂直滚动条还是水平滚动条) ::-webkit-scrollbar-...
  • vue 修改滚动条样式

    2021-08-24 14:40:48
    ::-webkit-scrollbar { width: 3px; height: 15px; background-color: #a8a8a8; } ::-webkit-scrollbar-thumb { background-color: #0173d4; border-radius: 3px; } ::-webkit-scrollbar-track { ... }
  • //滚动条的宽度 .your-table .el-table__body-wrapper::-webkit-scrollbar { width: 10px; height: 10px; } //滚动条的滑块 ...// 如果是整个页面的滚动条风格是一致的,直接改全局的滚动条样式也可以有效果..
  • vue项目中修改全局滚动条样式

    千次阅读 2020-12-04 10:52:18
    1、在base.css中加入该样式 /*全局滚动条样式*/ ::-webkit-scrollbar { width: 5px; height: 14px; } ::-webkit-scrollbar-thumb { ...如果想局部的话就在想要改变滚动条样式vue文件中写上CSS样式即可。
  • vue自定义浏览器滚动条(已兼容ie)
  • ::-webkit-scrollbar{ /*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } ::-webkit-scrollbar-thumb{ /*滚动条里面小方块*/ border-radius: 10px; background: #cfcbcb; } ::-...
  • (一年多前项目需要修改滚动条样式,在网上找了很久,根据一个大佬的写法终于改了样式。但忘记是哪位了,现今有需要改样式,翻出以前项目,所以记录下。哪位好心人知道是谁,望告知) 1、在base.css中加入该样式 ...
  • vue项目修改滚动条样式
  • 修改火狐滚动条样式demo,纯css修改火狐默认的滚动条样式
  • 因为这是css的事情,只要应用中加入全局或某个页面的滚动条样式就要以实现。以下是示列:::-webkit-scrollbar {width: 10px;}::-webkit-scrollbar-track {--webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);...
  • vue less CSS滚动条样式修改美化变细
  • 对于el-table滚动条样式,webkit(谷歌为代表)和 moz(火狐)的设置是不同的,因此需要分别进行设置。 webkit(谷歌) // 滚动条大小设置 ::v-deep .el-table__body-wrapper::-webkit-scrollbar { /*纵向滚动...
  • vue3.0中修改elementUI中table样式,和修改滚动条样式

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,579
精华内容 2,231
关键字:

vue修改滚动条样式