Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jogiter/scroll2
scroll to anywhere, using requestAnimationFrame
https://github.com/jogiter/scroll2
Last synced: 9 days ago
JSON representation
scroll to anywhere, using requestAnimationFrame
- Host: GitHub
- URL: https://github.com/jogiter/scroll2
- Owner: Jogiter
- License: wtfpl
- Created: 2018-05-09T09:10:31.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-12-19T10:50:43.000Z (about 4 years ago)
- Last Synced: 2024-12-08T10:45:31.777Z (30 days ago)
- Homepage:
- Size: 654 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## scroll2
Lightweight, cross-browser and highly customizable animated scrolling
### install
>yarn add scroll2
### usage
>scroll2(scrollY = 0, duration = 1000, callback)
|param|type|description|
|:----|:----|:----|
|scrollY|Number|scroll end position|
|duration|Number|scroll duration, default 1000|
|callback|Function|callback when scroll ended|
```js
const scroll2 = require('scroll2');
scroll2(1000, 500, (scrollY) => {
console.log(`scroll end at ${scrollY}`);
})
```
### [使用 javascript 获取视口/窗口大小（宽度和高度）](https://andylangton.co.uk/blog/development/get-viewportwindow-size-width-and-height-javascript)
----
### 使用 jQuery 方法获取窗口或文档的大小
```js
$(window).height() // returns height of browser viewport
$(document).height() // returns height of HTML document (same as pageHeight in screenshot)
$(window).width() // returns width of browser viewport
$(document).width() // returns width of HTML document (same as pageWidth in screenshot)
```
### [使用原生 js 方法获取窗口的大小](http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/)
**长版本**
```html
var viewportwidth
var viewportheight
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerWidth
viewportheight = window.innerHeight
} else if (
typeof document.documentElement != 'undefined' &&
typeof document.documentElement.clientWidth != 'undefined' &&
document.documentElement.clientWidth != 0
) {
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
viewportwidth = document.documentElement.clientWidth
viewportheight = document.documentElement.clientHeight
} else {
// older versions of IE
viewportwidth = document.getElementsByTagName('body')[0].clientWidth
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
document.write(
'<p>Your viewport width is ' + viewportwidth + 'x' + viewportheight + '</p>'
)
```
**短版本**
返回对象
```js
function viewport() {
var e = window,
a = 'inner'
if (!('innerWidth' in window)) {
a = 'client'
e = document.documentElement || document.body
}
return { width: e[a + 'Width'], height: e[a + 'Height'] }
}
```
返回变量
```js
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight || e.clientHeight || g.clientHeight
console.log(x + ' × ' + y)
```
### [使用原生 js 方法获取文档的大小](http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/)
```js
const body = document.body
const html = document.documentElement
let height = Math.max(
body.scrollHeight,
body.offsetHeight,
html.clientHeight,
html.scrollHeight,
html.offsetHeight
)
```
### 获取页面可滚动区域高度
```js
function getScrollHeight() {
let body = document.body
let html = document.documentElement
let height = Math.max(
body.scrollHeight,
body.offsetHeight,
html.clientHeight,
html.scrollHeight,
html.offsetHeight
)
let viewportHeight =
window.innerHeight ||
document.documentElement.clientHeight ||
document.getElementsByTagName('body')[0].clientHeight
return height > viewportHeight ? height - viewportHeight : 0
}
```
### 获取网页元素的绝对位置
```js
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
function getElementTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
}
```
### 阅读链接
* [stackoverflow: get-the-size-of-the-screen-current-web-page-and-browser-window](https://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window)
* [Get viewport/window size (width and height) with javascript](https://andylangton.co.uk/blog/development/get-viewportwindow-size-width-and-height-javascript)
* [How to get height of entire document with JavaScript?
](https://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript)
* [用Javascript获取页面元素的位置](http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html)
### LISENCE
[wtfpl](http://www.wtfpl.net/)