精华内容
下载资源
问答
  • el-scrollbar 优化滚动条样式

    万次阅读 2019-12-03 19:33:16
    element-ui 隐藏组件 el-scrollbar 优化滚动条样式

    博客地址:http://www.globm.top/blog/1/detail/30
    配置需求
    导入element-ui

    效果图修改后滚动条样式

    页面引入

    <el-scrollbar>
      <div>内容</div>
    </el-scrollbar>
    
    // 修改页面底部滚动条显示效果,可根据实际需要引入
    /deep/.el-scrollbar{
      height: 100%;
      .el-scrollbar__wrap {
        overflow-x: hidden;
      }
      .el-scrollbar__bar{
    	// 默认展示滚动条
         opacity: 1;
       }
       .el-scrollbar__thumb{
       	// 改变滚动条颜色
         background: #ED4040;
       }
    }
    

    注: 父元素需设置高度

    展开全文
  • html,body{ height:100%; overflow:hidden; }
  • 在使用vue + element-ui 搭建后台管理页面的时候,做了一个头部、侧栏、面包屑固定的...但这个方法并不兼容火狐浏览器,在火狐访问时依然是浏览器默认的滚动条样式。 .sidebar { position: fixed; border-right:...

    2021-1-6更新
    针对评论出现的问题
    1、 noresize="false"属性类型不符,加冒号绑定为动态属性 :noresize="false"
    2、代码不生效的问题,可能是没有设置高度导致,为<el-scrollbar />设置高度。

    在使用vue + element-ui 搭建后台管理页面的时候,做了一个头部、侧栏、面包屑固定的布局,导航栏和主要内容区域当内容超出时自动滚动。

    使用的原因:

    原来是采用优化浏览器样式的方式,对滚动条进行样式调整。但这个方法并不兼容火狐浏览器,在火狐访问时依然是浏览器默认的滚动条样式。

    .sidebar {
        position: fixed;
        border-right: 1px solid rgba(0,0,0,.07);
        overflow-y: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        transition: transform .25s ease-out;
        width: 300px;
        z-index: 3;
    }
    .sidebar::-webkit-scrollbar {
        width: 4px
    }
    
    .sidebar::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 4px
    }
    
    .sidebar:hover::-webkit-scrollbar-thumb {
        background: hsla(0,0%,53%,.4)
    }
    
    .sidebar:hover::-webkit-scrollbar-track {
        background: hsla(0,0%,53%,.1)
    }
    

    灵感来源

    在翻看 element-ui官网的文档时,发现其左侧导航和右边的内容超出屏幕时,滚动条的样式比较小巧,通过浏览器审查工具查看,发现它是使用了el-scrollbar的样式,跟element-ui的组件样式命名一致。但文档中并没有关于这个 scrollbar组件的使用文档,搜索一番得知这是一个隐藏组件,官方在 github 的 issues 中表示不会写在文档中,需要用的自己看源码进行调用。

    最终实现效果

    后台管理框架

    实现步骤

    一、阅读源码

    通过阅读源码,scrollbar组件暴露了 native, wrapStyle, wrapClass, viewClass, viewStyle, noresize, tag 这7个 props属性

    props: {
        native: Boolean,  // 是否使用本地,设为true则不会启用element-ui自定义的滚动条
        wrapStyle: {},  // 包裹层自定义样式
        wrapClass: {},  // 包裹层自定义样式类
        viewClass: {},  // 可滚动部分自定义样式类
        viewStyle: {},  // 可滚动部分自定义样式
        noresize: Boolean, // 如果 container 尺寸不会发生变化,最好设置它可以优化性能
        tag: {  // 生成的标签类型,默认使用 `div`标签包裹
          type: String,
          default: 'div'
        }
    }
    

    二、在页面中使用 el-scrollbar组件

    <template>
    	<div>
    		<el-scrollbar style="height: 200px;" :native="false" wrapStyle="" wrapClass="" viewClass="" viewStyle="" :noresize="false" tag="section">
    			<div>
    				<p v-for="(item, index) in 200" :key="index">{{index}} 这里是一些文本。</p>
    			</div>
    		</el-scrollbar>
    	</div>
    </template>
    

    以上代码就是对 el-scrollbar 的使用了,属性不需要用的就不用写。

    源码

    源码在node_modules 目录下的 element-ui/packages/scrollbar

    模块入口index.js,从main导入 scrollbar并提供一个安装方法注册成全局组件
    import Scrollbar from './src/main';
    
    /* istanbul ignore next */
    Scrollbar.install = function(Vue) {
      Vue.component(Scrollbar.name, Scrollbar);
    };
    
    export default Scrollbar;
    
    
    src/main.js 源码
    // reference https://github.com/noeldelgado/gemini-scrollbar/blob/master/index.js
    
    import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
    import scrollbarWidth from 'element-ui/src/utils/scrollbar-width';
    import { toObject } from 'element-ui/src/utils/util';
    import Bar from './bar';
    
    /* istanbul ignore next */
    export default {
      name: 'ElScrollbar',
    
      components: { Bar },
    
      props: {
        native: Boolean,
        wrapStyle: {},
        wrapClass: {},
        viewClass: {},
        viewStyle: {},
        noresize: Boolean, // 如果 container 尺寸不会发生变化,最好设置它可以优化性能
        tag: {
          type: String,
          default: 'div'
        }
      },
    
      data() {
        return {
          sizeWidth: '0',
          sizeHeight: '0',
          moveX: 0,
          moveY: 0
        };
      },
    
      computed: {
        wrap() {
          return this.$refs.wrap;
        }
      },
    
      render(h) {
        let gutter = scrollbarWidth();
        let style = this.wrapStyle;
    
        if (gutter) {
          const gutterWith = `-${gutter}px`;
          const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`;
    
          if (Array.isArray(this.wrapStyle)) {
            style = toObject(this.wrapStyle);
            style.marginRight = style.marginBottom = gutterWith;
          } else if (typeof this.wrapStyle === 'string') {
            style += gutterStyle;
          } else {
            style = gutterStyle;
          }
        }
        const view = h(this.tag, {
          class: ['el-scrollbar__view', this.viewClass],
          style: this.viewStyle,
          ref: 'resize'
        }, this.$slots.default);
        const wrap = (
          <div
            ref="wrap"
            style={ style }
            onScroll={ this.handleScroll }
            class={ [this.wrapClass, 'el-scrollbar__wrap', gutter ? '' : 'el-scrollbar__wrap--hidden-default'] }>
            { [view] }
          </div>
        );
        let nodes;
    
        if (!this.native) {
          nodes = ([
            wrap,
            <Bar
              move={ this.moveX }
              size={ this.sizeWidth }></Bar>,
            <Bar
              vertical
              move={ this.moveY }
              size={ this.sizeHeight }></Bar>
          ]);
        } else {
          nodes = ([
            <div
              ref="wrap"
              class={ [this.wrapClass, 'el-scrollbar__wrap'] }
              style={ style }>
              { [view] }
            </div>
          ]);
        }
        return h('div', { class: 'el-scrollbar' }, nodes);
      },
    
      methods: {
        handleScroll() {
          const wrap = this.wrap;
    
          this.moveY = ((wrap.scrollTop * 100) / wrap.clientHeight);
          this.moveX = ((wrap.scrollLeft * 100) / wrap.clientWidth);
        },
    
        update() {
          let heightPercentage, widthPercentage;
          const wrap = this.wrap;
          if (!wrap) return;
    
          heightPercentage = (wrap.clientHeight * 100 / wrap.scrollHeight);
          widthPercentage = (wrap.clientWidth * 100 / wrap.scrollWidth);
    
          this.sizeHeight = (heightPercentage < 100) ? (heightPercentage + '%') : '';
          this.sizeWidth = (widthPercentage < 100) ? (widthPercentage + '%') : '';
        }
      },
    
      mounted() {
        if (this.native) return;
        this.$nextTick(this.update);
        !this.noresize && addResizeListener(this.$refs.resize, this.update);
      },
    
      beforeDestroy() {
        if (this.native) return;
        !this.noresize && removeResizeListener(this.$refs.resize, this.update);
      }
    };
    
    
    展开全文
  • 滚动条样式修改

    万次阅读 2021-03-26 16:13:59
    ` .rightbom::-webkit-.../*滚动条整体样式*/ width: 6px; background: #041c34; } .rightbom::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 3px; height: 50px; background-color: #007acc; }

    `

    .rightbom::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    background: #041c34;
    }
    .rightbom::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 3px;
    height: 50px;
    background-color: #007acc;
    }
    
    展开全文
  • .scrollTop 竖直滚动条到顶部的距离 .scrollLeft 水平滚动条到最左边的距离 返回整个窗口的滚动条数值 非ie 返回整个窗口的滚动条数值 document.documentElement.scrollTop 竖直滚动条到顶部的距离 ...
    返回不带px的数值,没用负数,最小为0
    
    .scrollTop	  竖直滚动条到顶部的距离,即浏览器视口外的高度
    .scrollLeft  水平滚动条到最左边的距离
    .scrollHeight 滚动内容区域的高度
    
    返回整个窗口的滚动条数值
    
    	非ie
    		
    		返回整个窗口的滚动条数值
    			document.documentElement.scrollTop
    				竖直滚动条到顶部的距离
    			document.documentElement.scrollLeft
    				水平滚动条到最左边的距离
    
    ie和非ie获得滚动条的兼容写法
    		
    	var temp=document.documentElement.scrollTop||document.body.scrollTop
    

    在这里插入图片描述

    设置滚动条速度代码示例:

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>滚动事件</title>
    		<style>
    			div{
    				height:2000px;
    				
    			}
    			button{
    				position:fixed;
    				bottom: 100px;
    				right: 100px;
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    		<button class="btn">去那里</button>
    	
    	
    		</div>
    		
    		<script>
    			var button=document.querySelector("button");
    			
    			button.onclick=function(){
    				var id=setInterval(function(){
    					if(document.documentElement.scrollTop>0)
    					{
    						document.documentElement.scrollTop-=100;
    						
    						//当滑动条距顶部为0时,结束间隔任务
    						if(document.documentElement.scrollTop==0)
    						{
    							clearInterval(id);
    						}
    					}
    				},500);
    				
    			}
    			
    		</script>
    	</body>
    </html>
    
    展开全文
  • 为视频添加滚动条,可以实现视频的跳转功能,想播哪里就播哪里,是不是很便捷呢,下面我们就来看看如何实现这个功能,不多说,上代码! #include "cv.h" #include "highgui.h" //全局变量 int g_slider_position = ...
  • 如何去除滚动条并保留滚动功能 1、首先如果是超出其中一边滚动,另一边不能滚动的话,可以直接写明超出某一边的样式,比如: overflow-y:scroll 2、如果是两边都可以滚动的话,就给父级添加伪元素 ::-webkit-...
  • js禁止滚动条滚动并且隐藏滚动条

    千次阅读 2019-03-14 11:58:06
    禁止鼠标滑过滚动条滚动 document.body.onmousewheel = function () {return false;} 恢复鼠标滑过滚动条滚动 document.body.onmousewheel = function () {return true;} 禁止键盘控制滚动条滚动 document....
  • 滚动条

    千次阅读 2010-05-17 21:50:00
    滚动条 滚动条是图形用户界面中最好的功能之一,它很容易使用,而且提供了很好的视觉反馈。 滚动条既有垂直方向的(供上下移动),也有水平方向的(供左右移动)。很容易在应用程序中包含水平或者垂直的滚动条...
  • CSS-界面滚动时不显示滚动条

    万次阅读 多人点赞 2019-03-17 17:43:47
    最近产品提出一个需求,在界面滚动时,元素右侧不显示滚动条。查了网上的答案,最后总结了一下几个情况。 1、设置常规的滚动条:使用 overflow:auto。父元素需要设置一个高度,设置相对定位,这样子元素的高度大于...
  • html 底部出现滚动条 去掉滚动条

    万次阅读 2017-03-31 15:03:16
    网页的宽度超过了屏幕宽度,所以系统自动添加滚动条 CSS 禁止滚动条,有4种方法,具体如下: 1、完全隐藏 在<body>里加入scroll="no",可隐藏滚动条; <body scroll="no"> 2、在不需要时隐藏 指当...
  • 滚动条不占位置滚动 在父标签的样式添加: {width:calc(100% + 15px);} 滚动条隐藏滚动 在样式表添加: selector::-webkit-scrollbar{ width:0; }
  • 项目场景需求要在局部实现滚动,但是滚动出现了滚动条,一瞬间感觉整个页面都不好了,经过努力css成功实现滚动同时隐藏滚动条,废话不多说,直接上代码 核心代码: ::-webkit-scrollbar{ display:none; } 使用...
  • 水平滚动条和垂直滚动条设置

    千次阅读 2019-01-03 09:52:21
    1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2....
  • css修改滚动条样式

    万次阅读 2021-03-02 23:25:05
    css自定义滚动条样式自定义滚动条实例代码: 有时候觉得浏览器自带的滚动条,实在是太丑了,一点点内容超出比例,就是多大的一个滚动条就来了,实在是遭不住,所以我就动手了!!! 下图是浏览器自带的滚动条: ...
  • html,css手机滚动条滑动的时候显示滚动条,不滑动的时候滚动条隐藏
  • CSS设置滚动条样式(兼容IE)

    万次阅读 多人点赞 2017-05-18 16:33:47
    废话不多说,直接上demo,最下面有详细注释。...2、在IE浏览器下显示的样式(为了区分所以样式写的不一样,我没找到IE下设置滚动条宽高的方法) 下面是代码: Lorem ipsum dolor sit amet, consectet
  • ant table 组件的滚动条样式不太好看 考虑调整一下 而且表头 和x轴还出现了滚动条滚动条样式: 去掉表头的滚动条 .ant-table-fixed-header .ant-table-scroll .ant-table-header { overflow: hidden; height...
  • HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式 实现效果图: HTML代码 <div class="list scroll"> <div class="list-item">测试滚动条</div> <div class="list-item">测试...
  • PyQt5 技术篇-scrollArea不显示滚动条解决方法,Qt Designer不显示滚动条滚动条的显示和隐藏。 首先给大家展示一下,必显示滚动条的方法。 就是设置横向、纵向滚动条策略为总是显示:`ScrollBarAlwaysOn` 综合,只...
  • 滚动条样式以及隐藏滚动条

    千次阅读 2018-06-13 14:35:59
    一、滚动条样式修改:假设滚动区域外层div class="car-li-container-pile" .car-li-container-pile { width: 325px; margin: 0 10px; overflow-y: auto; overflow-x: hidden; } .car-li-contain...
  • 滚动条分页/滚动条事件触发

    千次阅读 2016-09-14 10:50:45
    使用jquery框架实现滚动条分页/滚动条事件触发,简单明了 //滚动条事件 record-dataTable-tbody是被滚动的标签的ID,可以是div,table,table里面的tbody等 $("#record-dataTable-tbody").scroll(function(){ //滚动...
  • 滚动条样式

    千次阅读 2018-12-03 11:37:30
    滚动条全局样式: // 滚动条设置 ::-webkit-scrollbar { width: 10px;//y轴上的滚动条宽度 height: 10px;//x轴上滚动条高度 } ::-webkit-scrollbar-track { border-radius: 3px; /*滚动条的背景区域的圆角*/ ...
  • C# winform ListBox添加滚动条ListBox当项超过高度时,会自动加上垂直滚动条,也可以设置其MultiColumn为true;当数据大于其宽度时会加上水平滚动条 this.lstUsers.HorizontalScrollbar = true;//任何时候都显示水平...
  • 如何只去掉水平滚动条或垂直滚动条呢,一些网页组件通过设置组件的style属性的overflow-x : hidden或overflow : hidden来去掉水平滚动条或垂直滚动条。但是对iframe不起作用。 可以通过下面的方法来去掉: 在...
  • 在option配置项中设置dataZoom属性即可,height即可指定滚动条的高度,这里我就 设置14。 dataZoom: [ { height: 14, type: "slider", show: true, xAxisIndex: [0], ...
  • 使用js或者jq设置滚动条滚动位置

    万次阅读 2018-01-28 22:45:31
    js原生方法scrollTo js原生设置x轴和y轴就一个方法,首先...如果只想设置y轴的滚动条位置,首先需要获取到当前x轴的滚动条位置,然后再设置y轴,如: dom.scrollTo(dom.scrollLeft, 100); //设置y轴滚动一百像素
  • //禁止滚动条滚动 stopScroll:function(){ document.documentElement.style.overflow=‘hidden’; document.body.style.position=‘fixed’; document.body.style.top=‘0px’; document.body.style.width=“100%”;...
  • 设置ScrollView的滚动条为隐藏的方法,scrollview滚动条 要实现ScrollView滚动条的隐藏,有两种方法, 一种是在XML的ScrollView布局中加入属性 android:scrollbars="none" 另一种则是在代码中获取...
  • 如为scroll-x,则设置scroll-left为9999--此处只是一个示例,设置一个比较大的值即可,滚动条的位置就会展示在最右侧。 如为scroll-y,则设置scroll-top为9999--此处只是一个示例,设置一个比较大的值即可,滚动条...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 58,786
精华内容 23,514
关键字:

滚动条