精华内容
下载资源
问答
  • 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;
       }
    }
    

    注: 父元素需设置高度

    展开全文
  • jquery监听页面滚动滚动事件

    万次阅读 2018-08-10 16:08:02
    $(document).scroll(function() { var scroH = $(document).scrollTop(); //滚动高度 var viewH = $(window).height(); //可见高度 var contentH = $(document).height(); //内容高度 ...
        $(document).scroll(function() {
            var scroH = $(document).scrollTop();  //滚动高度
            var viewH = $(window).height();  //可见高度 
            var contentH = $(document).height();  //内容高度
    
            if(scroH >100){  //距离顶部大于100px时
    
            }
            if (contentH - (scroH + viewH) <= 100){  //距离底部高度小于100px
                 
            }  
            if (contentH == (scroH + viewH)){  //滚动条滑到底部啦
                 
            }  
    
        });

     

    展开全文
  • 在使用vue + element-ui 搭建后台管理页面的时候,做了一个头部、侧栏、面包屑固定的布局,导航栏和主要内容区域当内容超出时自动滚动。 使用的原因: 原来是采用优化浏览器样式的方式,对滚动条进行样式调整。...

    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);
      }
    };
    
    
    展开全文
  • JS实现图片自动滚动(图片横向滚动)

    万次阅读 多人点赞 2018-11-13 15:55:57
    实现的效果就是 一排图片自动横向滚动,鼠标指向的时候,暂定滚动,鼠标离开,继续滚动 首先看下html代码:随便加入四张图片 <div id="div1"> <ul> <li><img src="img/logo-black.png" ...

    文章内容请戳,谢谢! http://zhangzeshan.top

    展开全文
  • CSS-界面滚动时不显示滚动

    万次阅读 多人点赞 2019-03-17 17:43:47
    最近产品提出一个需求,在界面滚动时,元素右侧不显示滚动条。查了网上的答案,最后总结了一下几个情况。 1、设置常规的滚动条:使用 overflow:auto。父元素需要设置一个高度,设置相对定位,这样子元素的高度大于...
  • .scrollTop 竖直滚动条到顶部的距离 .scrollLeft 水平滚动条到最左边的距离 返回整个窗口的滚动条数值 非ie 返回整个窗口的滚动条数值 document.documentElement.scrollTop 竖直滚动条到顶部的距离 ...
  • js禁止滚动滚动并且隐藏滚动

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

    万次阅读 2021-03-26 16:13:59
    ` .rightbom::-webkit-.../*滚动条整体样式*/ width: 6px; background: #041c34; } .rightbom::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 3px; height: 50px; background-color: #007acc; }
  • 为视频添加滚动条,可以实现视频的跳转功能,想播哪里就播哪里,是不是很便捷呢,下面我们就来看看如何实现这个功能,不多说,上代码! #include "cv.h" #include "highgui.h" //全局变量 int g_slider_position = ...
  • 滚动条不占位置滚动 在父标签的样式添加: {width:calc(100% + 15px);} 滚动条隐藏滚动 在样式表添加: selector::-webkit-scrollbar{ width:0; }
  • 如何去除滚动条并保留滚动功能 1、首先如果是超出其中一边滚动,另一边不能滚动的话,可以直接写明超出某一边的样式,比如: overflow-y:scroll 2、如果是两边都可以滚动的话,就给父级添加伪元素 ::-webkit-...
  • 使用js或者jq设置滚动滚动位置

    万次阅读 2018-01-28 22:45:31
    js原生方法scrollTo js原生设置x轴和y轴就一个方法,首先...如果只想设置y轴的滚动条位置,首先需要获取到当前x轴的滚动条位置,然后再设置y轴,如: dom.scrollTo(dom.scrollLeft, 100); //设置y轴滚动一百像素
  • 如何实现vue滚动条,滚动到置顶位置,如何实现平滑的动画效果。 ``` methods:{ Scroll(){ document.documentElement.scrollTop = document.getElementById('header').offsetWidth; }, } ``` 我滚动的...
  • CSS实现隐藏滚动条但是可以滚动

    万次阅读 2019-04-10 15:30:00
    今天记录一个很小的问题,在工作之中会经常遇到的,当页面元素溢出的时候会产生滚动条,这个时候需要页面样式优化:CSS实现隐藏滚动条但是可以滚动。 body::-webkit-scrollbar { display: none; } 示例...
  • 项目场景需求要在局部实现滚动,但是滚动出现了滚动条,一瞬间感觉整个页面都不好了,经过努力css成功实现滚动同时隐藏滚动条,废话不多说,直接上代码 核心代码: ::-webkit-scrollbar{ display:none; } 使用...
  • 浮动的div随滚动滚动滚动

    千次阅读 2016-09-14 11:55:13
    要想fixed也滚动才能看到内容,但是fixed滚动的话就不受别的滚动条的控制了,并且我还不希望fixed出现滚动条,这样影响了美观。 那么,我想到的办法是用jq监控window的滚动条,操作window的滚动条就相当于操作fixed...
  • 我在网上看到的网站上面图片随滚动条上下滚动滚动滚动时图片不会出现一闪闪的情况, 好像定在那里一样,而我写的,上下滚动时却会出现一闪一闪的情况,这是怎么回事?这是我 的代码 ![图片说明]...
  • Vue监听滚动实现锚点定位(双向)

    万次阅读 2018-05-21 21:36:03
    但是我和他不同,网上的方法都是 这样计算滚动条距离窗口顶部的距离,注意是窗口,用的是document对象 // Chrome document.body.scrollTop // Firefox document.documentElement.scrollTop ...
  • 当鼠标移动到ueditor的编辑框后,滚轮就开始移动编辑框下的编辑条了,当编辑条滚动到低后 怎么让再往下滚动,则滚动的是页面,这个效果怎么做啊,我现身是滚动到底后,页面不动,求大神解惑啊
  • scroll-view视图容器,可以设置横向滚动scroll-x以及纵向滚动scroll-y。 如为scroll-x,则设置scroll-left为9999--此处只是一个示例,设置一个比较大的值即可,滚动条的位置就会展示在最右侧。 如为scroll-y,则...
  • 在做弹出层时,因内容太多,需要加滚动条,当滚动弹出层的滚动条时下面的背景层的滚动条也会滚动,现在想让背景层不滚动,怎么解决?
  • //禁止滚动滚动 stopScroll:function(){ document.documentElement.style.overflow=‘hidden’; document.body.style.position=‘fixed’; document.body.style.top=‘0px’; document.body.style.width=“100%”;...
  • 关于QT添加滚动条实现滚动

    千次阅读 2019-09-18 10:21:14
    实现窗体有两种方法第一一可以自定义代码去确定滚动区域和滚动窗口 例如 ` QScrollArea *scrollArea = new QScrollArea; //创建滚动区域由;QWidget *sw = new QWidget()创建一个内容显示窗口 scrollArea->...
  • 实用小技巧之电脑如何滚动截屏/截取长图

    万次阅读 多人点赞 2015-04-02 13:28:48
    首先准备一个叫FScapture的工具,该工具虽然简单却很强大,我用的是绿色汉化版的,免安装。...1、解压后双击名为【FSCapture.exe】的运行文件,出现如图所示窗口:...一个是自动滚动模式,一个是自定义滚动模式。自动滚动
  • CSS设置滚动条样式(兼容IE)

    万次阅读 多人点赞 2017-05-18 16:33:47
    废话不多说,直接上demo,最下面有详细注释。...2、在IE浏览器下显示的样式(为了区分所以样式写的不一样,我没找到IE下设置滚动条宽高的方法) 下面是代码: Lorem ipsum dolor sit amet, consectet
  • div超出部分滚动并且隐藏滚动

    万次阅读 2019-06-30 17:41:18
    想要实现的效果是:div具备滚动效果,但是外面看不到滚动条。 需求:博客系统,由于发博客的人数较多,不能全部显示在页面上,所以需要滚动效果,但是界面上一般会安排一个div专门放置从数据库读取出来的博客数据,...
  • DataGridView滚动条同步滚动

    千次阅读 2017-04-30 00:42:48
    用scroll事件 private void dataGridView1_Scroll(object sender, ScrollEventArgs e) { //水平滚动滚动 if (e.ScrollOrientation == ScrollOrientation.HorizontalScroll) {
  • vue项目中实现监听滚动滚动事件并滚动到固定位置需求场景直接上代码THE LAST 需求场景 项目结构:vue node.js webpack 滚动滚动到某处的时候 tab就切换成当前位置的值并且点击tab还能滚动到想要的位置,大概就是...
  • 有些时候TextView显示的长度不够需要实现滚动效果,有时候layout布局文件设置了一些属性后,能够实现滚动效果。但是TextView一旦失去焦点,滚动效果就停止了。 二、思路 重写TextView的回调函数,当失去焦点时仍然使...
  • CSS 实现隐藏滚动条同时又可以滚动

    万次阅读 2018-08-31 14:49:43
    移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚动的特性。 由于只需要兼容移动浏览器(Chrome 和 Safari...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 175,066
精华内容 70,026
关键字:

滚动