vue-scroll-response
vue-scroll-response 解决了什么问题
vue2.x 指令
- 滚动内容区,目录区会同时响应,当前可视区的目录可以添加激活样式
- 目录区激活样式可能不在可视区,赋予自动调整到可视区功能
DEMO
GITHUB
安装
npm install --save-dev vue-scroll-response
引用
import scrollResponse from 'vue-scroll-response'
Vue.use(scrollResponse)
前提(重要)
目录容器中的标题和内容容器中的标题要形成一一对应,并且都带有一致的类名(详情见src/components/test.vue)
使用
<test v-scroll-response="{title:'title',contentId:'content',catalogId:'catalog'}"></test>
如果不想要内容区的目录呈现激活样式,设置contentTitleActive为off
<test v-scroll-response="{contentTitleActive:'off',title:'.title',contentId:'content',catalogId:'catalog'}"></test>
参数详解
参数 | header 2 |
---|---|
title | 目录容器中的标题和内容容器中的标题的统一类名 |
contentId | 内容容器id,是添加scroll事件的元素 |
catalogId | 目录容器id,是添加scroll事件的元素 |
contentTitleActive | 当设置为'off'时,内容区的标题不会有激活样式 |
自定义激活样式(需要自己手动添加)
.catalog-active>a {
color: red!important;
}
Dependencies
Dependencies
autoprefixer: ^6.7.2babel-core: ^6.22.1babel-loader: ^6.2.10babel-plugin-transform-runtime: ^6.22.0babel-preset-es2015: ^6.22.0babel-preset-stage-2: ^6.22.0babel-register: ^6.22.0chalk: ^1.1.3connect-history-api-fallback: ^1.3.0css-loader: ^0.26.1eventsource-polyfill: ^0.9.6express: ^4.14.1extract-text-webpack-plugin: ^2.0.0-rc.2file-loader: ^0.10.0friendly-errors-webpack-plugin: ^1.1.3function-bind: ^1.1.0html-webpack-plugin: ^2.28.0http-proxy-middleware: ^0.17.3opn: ^4.0.2optimize-css-assets-webpack-plugin: ^1.3.0ora: ^1.1.0pug: ^2.0.0-beta11sass-loader: ^6.0.1semver: ^5.3.0shelljs: ^0.7.6url-loader: ^0.5.7vue-loader: ^11.0.0vue-style-loader: ^2.0.0vue-template-compiler: ^2.1.10webpack: ^2.2.1webpack-bundle-analyzer: ^2.2.1webpack-dev-middleware: ^1.10.0webpack-hot-middleware: ^2.16.1webpack-merge: ^2.6.1