ScrollHint
Suggests that the elements are scrollable horizontally, with the pointer icon.
Installation
via npm
npm install scroll-hint --save
via yarn
yarn add scroll-hint
via cdn
<link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.1.2/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@1.1.2/js/scroll-hint.js"></script>
Usage
import the js with babel and Browserify/Webpack
import ScrollHint from 'scroll-hint';
new ScrollHint('.js-scrollable');
Option
| Name | Default | Description |
|---|---|---|
suggestClass |
is-active | Classname to be added when the element is scrolled-in |
scrollableClass |
is-scrollable | Classname to be added when the element is scrollable |
scrollableRightClass |
is-right-scrollable | Classname to be added when the element is right-scrollable |
scrollableLeftClass |
is-left-scrollable | Classname to be added when the element is left-scrollable |
scrollHintClass |
scroll-hint | Classname to be added to the element |
scrollHintIconClass |
scroll-hint-icon | Classname to be added to the icon |
scrollHintIconAppendClass |
scroll-hint-icon-white | Another classname to be added to the element's icon |
scrollHintIconWrapClass |
scroll-hint-icon-wrap | Classname to be added to the icon's wrapper |
scrollHintText |
scroll-hint-text | Classname to be added to the text |
remainingTime |
-1 | When to hide scroll-hint icon (ms) |
scrollHintBorderWidth |
10 | Shadowbox border width of the element |
enableOverflowScrolling |
true | When using iOS and the value is true, -webkit-overflow-scrolling property will be added to the element |
suggestiveShadow |
false | Show suggestive shadow, when the element is scrollable |
applyToParents |
false | Apply JavaScript to the parent element |
i18n.scrollable |
scrollable | You can change the scrollable text from here |
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .father{ width: 100px; height: 200px; /*如果子元素超出父元素 会出现滚动条*/ overflow: scroll; } .son{ width: 200px; height:
-
<ion-scroll scrollX="true"> </ion-scroll> <ion-scroll scrollY="true"> </ion-scroll> <ion-scroll scrollX="true" scrollY="true"> </ion-scroll> 属性 属性名称 类型 描述 scrollX boolean 是否启用x轴滚动 scrollY boolean 是否启用
-
滚动列表，提供了优质的原生滚动体验，便捷的配置项和事件，是一个基于better-scroll进行封装的组件。 滚动原理 由于 better-scroll 的滚动原理为：在滚动方向上，第一个子元素的长度超过了容器的长度。 那么对于 Scroll 组件，其实就是内容元素.cube-scroll-content在滚动方向上的长度必须大于容器元素 .cube-scroll-wrapper。根据滚动方向的不
-
无限滚动指令。 引入 import { InfiniteScroll } from 'mint-ui'; Vue.use(InfiniteScroll); 例子 为 HTML 元素添加 v-infinite-scroll 指令即可使用无限滚动。滚动该元素，当其底部与被滚动元素底部的距离小于给定的阈值（通过 infinite-scroll-distance 设置）时，绑定到 v-infinite
-
描述 (Description) 您可以通过添加.scroll类来水平滚动表。 例子 (Example) 以下示例演示了在Foundation中使用scroll table - <!doctype html> <head> <meta charset = "utf-8" /> <meta http-equiv = "x-ua-compatible" content =
-
介绍 (Introduction) 滚动条控件表示滚动条组件，以便用户可以从值范围中进行选择。 类声明 以下是java.awt.Scrollbar类的声明: public class Scrollbar extends Component implements Adjustable, Accessible 字段 (Field) 以下是java.awt.Image类的字段: st
-
scroll-view 可滚动视图区域。 属性名 类型 默认值 说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 lower-threshold Number 50 距底部/右边多远时（单位px），触