ScrollDir_利用 CSS 来控制垂直滚动的 JavaScript 插件

Web前端开发网

fly63.com

首页资源工具文章教程栏目

ScrollDir

网站地址:https://dollarshaveclub.github.io/scrolldir/

GitHub:https://github.com/dollarshaveclub/scrolldir

网站描述:利用 CSS 来控制垂直滚动的 JavaScript 插件

访问官网

GitHub

ScrollDir 是 Scroll Direction 的缩写，它是一个 0 依赖，并且大小〜1kb 的微型 JavaScript 插件。它通过数据属性轻松利用 css 来控制垂直滚动。可用作向下滚动隐藏，向上滚动显示的粘性导航菜单。

ScrollDir 的效果就像粘性导航菜单，当你向下滚动页面的时候，导航菜单隐藏，向上滚动页面的时候，导航菜单显示。

特色：

根据滚动方向显示或隐藏粘性元素
在滚动的时候只改变其方向属性
忽略导致不必要的元素抖动的滚动动作

用法

ScrolScrollDir 会将 <html> 元素上的 data-scrolldir 属性设置为 up 或 down ：

<html data-scrolldir="up">

或者

<html data-scrolldir="down">

然后根据用户滚动的方向更改样式：

[data-scrolldir="down"] .my-fixed-header { display: none; }

设置

简单模式

只需要在你的 HTML 文档中添加 scrolldir.auto.min.js 文件。然后使用 [data-scrolldir="down"] 和 [data-scrolldir="up"] 写一些 CSS 样式。

定制模式

添加 scrolldir.min.js 。你可以访问下面的 api 选项，并且必须调用 scrollDir 。

scrollDir();

使用使用 data-scrolldir 以外的属性：

scrollDir({ attribute: 'new-attribute-name' });

将 Scrolldir 属性添加到不同的元素中：

scrollDir({ el: 'your-new-selector' });

关闭 Scrolldir ：

scrollDir({ off: true });

在页面加载（或应用程序启动）时，提供不同的滚动方向：

scrollDir({ direction: 'up' }); // 默认为向下滚动

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/1070

热门资源

less

一个CSS预处理器，意味着它扩展了CSS语言，增加了允许变量，混合，函数和许多其他技术的功能

官网

GitHub

sass

成熟、稳定和强大的CSS扩展语言

官网

GitHub

postcss

PostCSS是一个使用JavaScript插件来转换CSS的工具。

官网

GitHub

stylus

Stylus是一个高效、动态以及丰富的CSS预处理器

官网

GitHub

animate.css

齐全的CSS3动画库

官网

GitHub

Metro UI

基于平板界面设计CSS库是一种界面展示技术

官网

GitHub

Spectre.css

轻量响应式 CSS 框架

官网

GitHub

water.css

只需添加CSS框架即可应用样式，无需定义元素类

官网

GitHub

GitHub

一个CSS库，使用美丽的图案填充空的背景。

官网

GitHub

three-dots

一组CSS加载动画，它由三个点组成，而这些点仅由单个元素组成

官网

GitHub

CSSeffectsSnippets

提供了漂亮的CSS动画

官网

GitHub

类似于ScrollDir的资源

BearCss

是一个免费的Web应用程序

官网

kube

一个小于6KB拥有响应式网格系统的CSS框架

官网

GitHub

minireset.css

一套小巧的现代CSS重置版

官网

GitHub

官网

GitHub

官网

GitHub

CSS Gradient Generator

CSS在线生成渐变色

官网

open-color

UI设计的配色方案

官网

GitHub