export function processScroll (_this) {
  let _self = _this
  let scrollbarEl = _this.$parent.wrap
  scrollbarEl.onscroll = function() {
    if(scrollbarEl.scrollTop > 170) {
      _self.prostyle = {
        position: 'fixed',
        width: '100%',
        maxWidth: '810px',
        top: 0
      }
    } else {
      _self.prostyle = {
        
      }
    }
  }
}
 
在监测滚动的位置时候 做样式的修改

el-scrollbar 监测滚动条的更多相关文章

  1. vue 中监测滚动条加载数据（懒加载数据）

    vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...

  2. [C#] （原创）一步一步教你自定义控件——02，ScrollBar（滚动条）

    一.前言 技术没有先进与落后,只有合适与不合适. 本篇的自定义控件是:滚动条(ScollBar). 我们可以在网上看到很多自定义的滚动条控件,它们大都是使用UserControl去做,即至少使用一个P ...

  3. Scrollbar中滚动条的设置

      insideOverlay 默认值,表示在padding区域内并且覆盖在view上 insideInset 表示在padding区域内并且插入在view后面 outsideOverlay 表示在p ...

  4. js监测滚动条到达最底边

    scroll : function(){ $(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollH ...

  5. JS模拟滚动条(有demo和源码下载,支持拖动 滚轮 点击事件)

    由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...

  6. svelte组件：svelte3.x自定义美化虚拟滚动条组件svelte-scrollbar

    基于svelte3.0自定义pc端虚拟滚动条组件svelteScrollbar. svelte-scrollbar:运用svelte3.x创建的桌面pc版自定义美化滚动条组件.支持是否原生滚动条.自动 ...

  7. Tkinter教程之Scrollbar篇

    本文转载自:http://blog.csdn.net/jcodeer/article/details/1811319 '''Tkinter教程之Scrollbar篇'''#Scrollbar(滚动条) ...

  8. js原生封装自定义滚动条

    /* * @Author: dothin前端 * @Date: 2015-11-21 00:12:15 * @Last Modified by: dothin前端 * @Last Modified t ...

  9. Unity UGUI基础之Slider、Scrollbar

    Slider(滑动条):是一个主要用于形象的拖动以改变目标值的控件,他的最恰当应用是用来改变一个数值,最大值和最小值自定义,拖动滑块可在此之间改变,例如改变声音大小. Scrollbar(滚动条):是 ...

随机推荐

  1. 美丽的神话 flac 成龙/金喜善 美丽的神话 mp3 韩红/孙楠

    这里分享从网上收集的俩个版本的歌,都很不错,有兴趣的可以听听 以下是成龙/金喜善 flac 版本,音质不错: 美丽的神话成龙/金喜善解开我最神秘的等待星星坠落风在吹动终于再将你融入怀中两颗心颤抖相信我 ...

  2. 长篇图解etcd核心应用场景及编码实战

    大家好啊,我是字母哥,今天写一篇关于etcd的文章,其实网上也有很多关于etcd的介绍,我就简明扼要,总结提炼,期望大家通过这一篇文章掌握etcd的核心知识以及编码技能! 本文首先用大白话给大家介绍一 ...

  3. Android Notification使用

    一 Notification的类别 1.状态栏和抽屉式通知 //获取NotificationManager对象 val notificationManager = getSystemService(N ...

  4. CodeForces - 1629C

    Problem - 1629C - Codeforces 题意: 一个序列,每次可以从开头选择一个长度为K的序列,然后得到这个序列的MEX(最小的未出现的数),问最后可以求得的字典大小最大的序列是多少 ...

  5. Java中数组

    数组的定义格式: 1: 数据类型[] 数组名 2: 数据类型 数组名 动态初始化: 初始化的时候 系统会默认给数组赋值 数据类型[] 变量名 = new 数据类型[数组长度] int[] arr = ...

  6. 第五十九篇：关于Vue

    好家伙,前面关于vue的学习太散太乱了,我决定重新整理一下知识框架,当作复习了,并且在其中补充一些概念 先提出一个问题:怎么把数据弄到页面上? 若不借助vue,把数据填充到页面上, 我们需要操作dom ...

  7. 面试突击80：说一下 Spring 中 Bean 的生命周期？

    Java 中的公共类称之为 Bean 或 Java Bean,而 Spring 中的 Bean 指的是将对象的生命周期,交个 Spring IoC 容器来管理的对象.所以 Spring 中的 Bean ...

  8. React Native 入门 调试项目

    不管时用哪种语言,哪种框架,调试永远都是一个避不开的话题 为我们提供了远程调试的功能,而这个功能需要Chrome浏览器的配合. 1. 首先浏览器一定要安装好React Developer Tool 插 ...

  9. imread opencv

    ''' Mat cv::imread ( const String & filename, int flags = IMREAD_COLOR ) Python: retval = cv.imr ...

  10. crictl 命令 - Kubernetes 管理命令详解

    描述:crictl 是 CRI 兼容的容器运行时命令行对接客户端, 你可以使用它来检查和调试 Kubernetes 节点上的容器运行时和应用程序.由于该命令是为k8s通过CRI使用containerd ...