npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-ohyeah-scroll

v0.5.6

Published

prettier scroll

Downloads

44

Readme

vue-ohyeah-scroll

npm NPM GitHub last commit npm downloads

仿 MAC 系统的滚动条

PC 端,移动端都能用

| IE / Edge | Firefox | Chrome | Safari | Opera | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

重构待测/未来计划

  1. 测嵌套 👌
  2. 触发各事件 👌
  3. 平滑滚动 👌
  4. 锚点跳转 👌
  5. 键盘事件 👌
  6. 变颜色,换位置,随机改变大小 👌
  7. 各方法测试 👌
  8. safari 多次触发触底触顶事件 👌
  9. 整理代码 👌
  10. padding 2px 👌
  11. firefox scrollTo 滚动到顶部 模拟滚动条没动 👌 firefox 不触发 scroll 事件
  12. IE11 轨道上点击,位置没对 👌 IE11 不支持 Number.isFinite
  13. 轨道上点击 needSmooth 问题 👌
  14. 移动端不渲染,样式还原 👌
  15. scrollTo 兼容不支持原生平滑的浏览器
  16. 自动隐藏true时,不滚动过一段时间自动隐藏

特性

  • [x] 默认是 MAC 系统的主题,也可以自定义轨道和滑块颜色
  • [x] 可以设置滚动条显示在左边或上面
  • [x] 自动显隐滚动条
  • [x] 动态手动设置滚动条的 scrollTop 和 scrollLeft
  • [x] 支持一键滚动到底部
  • [x] 内容随意增减,父级容器随便改变大小
  • [x] 支持嵌套

效果预览

https://isluo.com/work/vue-ohyeah-scroll/

安装

  yarn add vue-ohyeah-scroll

使用

全局注册

import { Ohyeah } from "vue-ohyeah-scroll";
Vue.use(Ohyeah);

局部注册

import { Ohyeah } from "vue-ohyeah-scroll";

export default {
  components: {
    Ohyeah,
  },
};

组件中使用

<template>
  <Ohyeah width="100vw" height="100vh">
    ...
  </Ohyeah>
</template>

自定义属性

| 属性名 | 类型 | 默认值 | 描述 | | ------------ | ------------- | ----------- | ------------------------------------------------------------------------------------------------------- | | id | String | 随机数 | 一个唯一的 ID,可以不填 | | width | Number,String | 100% | 容器宽度,默认贴合父级(父级需要有宽度),也可自己设置,接受合法的 CSS 值,传数字会转换成 px | | height | Number,String | 100% | 容器高度,默认贴合父级(父级需要有高度),也可自己设置,接受合法的 CSS 值,传数字会转换成 px | | breadth | Number | 6 | 滑块的粗细,单位: px | | thumbColor | String | #7f7f7f | 滑块的颜色,接受 CSS 颜色值 | | trackColor | String | transparent | 轨道的颜色,接受 CSS 颜色值 | | autoHide | Boolean | true | 是否自动隐藏滚动条,鼠标在区域内才显示 | | left | Boolean | false | 是否把垂直滚动条放在容器的左边 | | top | Boolean | false | 是否把水平滚动条放在容器的顶端 | | noVer | Boolean | false | 是否禁用垂直滚动条(overflow-y:hidden) | | noHor | Boolean | false | 是否禁用水平滚动条(overflow-x:hidden) | | minLength | Number | 20 | 当内容无限多的时候,滑块最短不得低于此值,单位: px | | resizeObject | Boolean | false | 如果存在监听不到内容高度变化的情况可以把这个值改为 true 试试,(nuxt.js 打包后 firefox 发现有这种情况) |

自定义事件

自身方法

| 方法名 | 参数 | 描述 | | ------------- | ------------------------------------ | ------------------------------------------------------ | | scrollTo | (x:number,y:number,isSmooth:boolean) | 滚动到指定的位置,x 水平,y 垂直, isSmooth 是否平滑过度 | | getScrollInfo | 无 | 获取当前滚动条各种信息 |

如何使用自身方法:

<template>
  <!-- 需要定义一个ref -->
  <Ohyeah ref="oh1">
    ...
  </Ohyeah>
</template>

<script>
export default {
  methods: {
    scrollTo() {
      // 水平保持原位,垂直滚到100px处,平滑过度
      this.$refs.oh1.scrollTo(null, 100, true);
    },
    scrollToEnd() {
      // 水平滚到最左边,垂直滚到底,瞬间完成
      this.$refs.oh1.scrollTo(0, "end", false);
    },
    getScrollInfo() {
      // 获取当前滚动条各种信息
      const msg = this.$refs.oh1.getScrollInfo();
      /**
       * height: 内容区可见高度,不包括边框
       * width: 内容区可见宽度,不包括边框
       * clientHeight: 同height,
       * clientWidth: 同width,
       * offsetHeight: 内容区高度,包括边框
       * offsetWidth: 内容区宽度,包括边框,
       * scrollTop: 内容区已被滚到上边去的距离,
       * scrollLeft: 内容区已被滚到左边去的距离,
       * scrollHeight: 内容区真实总高度,包括看不见的区域
       * scrollWidth: 内容区真实总宽度,包括看不见的区域
       * */
    },
  },
};
</script>

完整例子

<template>
  <!-- 若不设置ohyeah的width和height, 则需要一个具有高度和宽度的容器来包裹ohyeah -->
  <div style="height:100vh; width:50%;">
    <Ohyeah>
      <p v-for="(item, index) in testData" :key="index">{{ index }}</p>
    </Ohyeah>
  </div>
</template>

<script>
import { Ohyeah } from "vue-ohyeah-scroll";
export default {
  data(){
    return {
      testData: new Array(100).fill("")
    }
  }
  components:{
    Ohyeah
  }
}
</script>

注意事项

scrollTo(x,y,isSmooth) 方法 平滑滚动使用的是scroll-behavior: smooth;,目前chrome,firefox,opera支持 > 但是:浏览器水平滚动条和垂直滚动条是互斥的,当水平正在滚时,垂直滚不动,反之亦然。浏览器始终只会有一个方向处于滚动中 > 所以:如果设置了isSmoothtrue,那么不要同时设置 x 和 y,至少有一个应该为null

如果你不设置 ohyeah 的 width 和 height 属性,或者设置为百分比,那么就需要一个具有高度和宽度的父级元素来包裹 ohyeah

更新

  • 0.5.x 重构了,现在基于原生滚动条的默认行为