当前位置：首页 > 软件库 > 程序开发 > >

scroll-js

授权协议 MIT License

开发语言 JavaScript

所属分类程序开发

软件类型开源软件

地区不详

投递者林英锐

操作系统跨平台

开源组织无

适用人群未知

软件概览

Scroll

A light-weight library that will allow you to scroll any html element using native javascript.In addition to providing extra scrolling features, this library also aims to be a polyfill for the scrollToand scrollIntoView APIs and allows you to scrollusing animations that are based loosely on thescrollOptions of the DOM specification.Manipulates native scroll properties so that native events fire appropriately and uses browser's animation frames forfast and smooth rendering.

Why use this over other scroll libraries and plugins?

Many other scroller libraries use absolutely positioning, css animations, transitions and other types of workarounds directly onthe window.document, <html>, <body> and other elements to "fake" a scrolling effect in order to get the scroller to behave.

While this is clever, desktop and mobile devices (mobile mainly), heavily depend on the natural scroll events of theseelements to do helpful things for the user.Like hiding the location url bar as you scroll down the window of the document (on mobile browsers), for instance. Orpausing heavy processes, untilthe user is done performing a task as to not interrupt them, or adding inertia or natural momentum when scrolling. Soit's increasingly important that the scroll logic added to these elements is done in a way thatlends nicely to these use cases, which is what this library does.

Benefits

pure, native javascript
returns Promises so you can do things when scrolling completes (async/await is supported)
no css transitions, animations or absolute positioning hacks
manually scroll to any portion of a page and detect when done
safe to use on the document.body element
supports scroll options from CSS DOM specification
battery-friendly -- uses minimal amount of CPU power (no processing on inactive tabs, and hidden elements!)
fast and smooth rendering (no choppiness)
does not hijack native browser functionality (i.e. inertia scrolling, momentum defaults)
native "onscroll" events can still be used (window.onscroll andElement.onscroll)
Both non-AMD and AMD compatible

Installation

You can install the library as a npm module by running the following command:

npm i scroll-js

Alternatively, you can simply download one of the distribution files (un-minified or minified version) in the /dist folder and reference them directly in your html file.

<script src="node_modules/scroll-js/dist/scroll.js"></script>

Usage

import { scrollTo } from 'scroll-js';

scrollTo(window, { top: 500 }).then(function () {
    // window has scrolled 500 pixels down the page
});

In addition to the samples below, you can find more in the examples folder.

Scrolling an element

You can manually scroll any element on a page and optionally detect when done. Just make sure the element you want to scroll has:

A specified height css property.
css overflow property that is set to hidden.
Content that extends beyond the specified height.

The following example scrolls the window (document body).

import { scrollTo } from 'scroll-js';
scrollTo(document.body, { top: 500 }).then(function () {
    //scrolling down 500 pixels has completed!
});

Scroll to an element

import { scrollIntoView } from 'scroll-js';
var myElement = document.body.getElementsByClassName('my-element')[0];
scrollIntoView(myElement, document.body, { behavior: 'smooth' }).then(
    function () {
        // done scrolling document's body to show myElement
    }
);

Scroll easing

You can scroll with easing using the behavior option of the scrollTo specification.

import { scrollTo } from 'scroll-js';
scrollTo(document.body, { top: 600, behavior: 'smooth' }).then(function () {
    // scrolled down 600 pixels smoothly
});

Easing is also supported simply by passing the easing option with an easing string that can be found in thesrc/scroll.ts file.

import { scrollTo } from 'scroll-js';
scrollTo(document.body, { top: 200, easing: 'ease-in-out' }).then(function () {
    // scrolled down 200 pixels, easing on beginning and end
});

Note that even though easing option is supported by this package,it is not guaranteed that it will be supported by the specification.

Detect scroll events

Listen in on native scroll events the same way you would if a user was scrolling with a mouse or touch event.

import { scrollTo } from 'scroll-js';
window.addEventListener('scroll', function () {
    // scrolling!
});
scrollTo(document.body, { top: 300 }); // scroll to trigger event

API Documentation

scrollTo(element, options)

Option	Type	Description
`element`	`HTMLElement`	The element to scroll
`options`	`ScrollToOptions`	A set of scroll options (see writeup below) (i.e. `{behavior: 'smooth', top: '20', left: '0''}`)

scrollTo Options

The scrollTo method allows a set of options which are synonymous with theScrollToOptions of the CSS specification,but some additional ones are provided by this library until supported natively.

Option	Type	Description
`behavior`	String	The type of scroll behavior which can be set to `auto` or `smooth`. This is the recommended option since this is already natively supported. If this is set, all other options are ignored.
`duration`	Number	The number of milliseconds the scroll will take to complete
`easing`	String	The easing to use when scrolling. Only keyword values of the animation-timing-function are supported. But passing function values will eventually be supported also (ie. `cubic-bezier(0.1, 0.7, 1.0, 0.1)`, `steps(4, end)`, etc)

scrollIntoView(element, [scroller], [options])

Option	Type	Description
`element`	`HTMLElement`	The element to scroll into the viewport
`scroller`	`HTMLElement`	The element to be scrolled (defaults to `document.body`)
`options`	`ScrollIntoViewOptions`	A set of scroll options to scroll the element into view (see writeup below) (i.e. `{behavior: 'smooth', top: '20', left: '0''}`)

scrollIntoView Options

A set of ScrollIntoViewOptions can be passed to the scrollIntoView method.

Option	Type	Description
`behavior`	String	The type of scroll behavior which can be set to `auto` or `smooth`. Defaults to `auto`.

Examples

Code samples showing how to use this package can be found in the examples folder. To run them, pull down this projectand

npm start

Which will make the examples available at http://localhost:9383/examples/.

Development

Run tests:

npm install
npm test

使用案例

使用uview的组件库，现在又u-scroll-list组件2个，想实现在H5页面滑动时，一个u-scroll-list组件的滑动的...

您可以在两个u-scroll-list组件的同一个父组件中，通过v-on指令监听滚动事件，在滚动事件的回调函数中，通过JavaScript操作两个u-scroll-list组件的scrollTop属性，使它们同时滚动。下面是一个示例代码： <template> <div> <u-scroll-list ref="scrollList1" @scroll="handleScroll"/>
uni-app的＜scroll-view＞＜/scroll-view＞向上滚动判断是否应该刷新

大致思路通过判断滚动高度来确定是否应该开启刷新，如果滚动高度大于0就关闭下拉刷新，如果滚动高度小于等于0就开启下拉刷新。 html // <template> //scroll-y:开启y轴滚动 //refresher-enabled:动态判断是否开启自定义下拉刷新 //refresher-triggered:动态设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表
微信小程序scroll-view的scroll-into-view无效如何解决

微信小程序scroll-view的scroll-into-view无效如何解决最近在写小程序项目遇到这么一个问题：在使用scroll-into-view的时候无效。在网上查了一遍，给出的答案有： 1.给scroll-view要设置高度，必须设置上scroll-y或者scroll-x为true（必须要的） 2.scroll-into-view初始化设置的时候，可能因为页面或者数据未加载不能跳转。
dv-scroll-board vue

1、npm安装 npm install @jiaminghi/data-view 2、main.js引入 import DataV from ‘@jiaminghi/data-view’ Vue.use(DataV) <dv-scroll-board :config="config" @click="boardClick" style="width: 100%; height: 200px" /
有两个怎么修改scroll-view组件，滑动一个scroll-view组建的时候，另一个怎么修改scroll-view组件可以同步...

如果要修改scroll-view组件并使两个scroll-view组件在滑动一个时同步滑动，可以使用以下方法：给两个scroll-view组件分别绑定滑动事件，在滑动一个scroll-view组件时，通过代码设置另一个scroll-view组件的滑动位置。使用JavaScript代码监听一个scroll-view组件的滑动事件，在滑动时动态更新另一个scroll-view组件的滑动位置。以下
uniapp中scroll-view利用scroll-into-view实现锚点功能

<template> <view class="content"> <scroll-view scroll-y="true" :scroll-into-view="intoindex" style="height: 300px;"> <view v-for="(item,index) in content" :key='index' :id='"text"+index'>{{item+
vue dv-scroll-board

view <dv-scroll-board :config="config2" style="height:286px;font-size:20px !important;overflow:hidden;" /> data config2: { data: [ [ '<span style="font-size:1rem;">
uniapp使用scroll-view的:scroll-into-view=“lastChatData“跳到某个元素id时候，在app上不生效，小程序没...

lastChatData定义的要跳转元素的id app上不生效或者没有跳到合适位置，只需要加一个一次性定时器来延迟赋值就ok。如： setTimeout(()=>{ that.lastChatData = 元素id },500)