目前为止实现最好的js模拟滚动功能

2023-03-07 14:15:02JavaScript022

目前为止实现最好的js模拟滚动功能,第1张

simulation-scroll-y 是开源库 finger-mover 的一个插件，该插件的实现功能为移动端纵向模拟滚动。

基于 simulation-scroll-y 插件可以实现很多效果及功能，查看： Full demo

finger-mover 提供中英双语文档。

安装和使用官方文档写的很清楚，这里就贴出地址： finger-mover 中文文档

根据文档介绍他有如下特性：

移动端模拟滚动的库有很多，例如：iscroll、xscroll、better-scroll 等等，那为什么还要一个 simulation-scroll-y 呢？答案是：这并不是一个轮子。不妨做如下对比：

库体积很大一部分是由框架所提供的功能决定的，但是在完成相同功能的前提下，simulation-scroll-y 应该算是最小的。

simulation-scroll-y 作为 finger-mover 的插件，其体积只有 4.42kb，即使加上 finger-mover 本身的 11.12kb 也才只有 15.54kb，关键是 finger-mover 还提供了其他移动的插件，供你选择。

如果你仅仅要实现一个模拟滚动已经下拉刷新、无限滚动的功能，那么使用 simulation-scroll-y 要比你一次性的引入其他框架如 iscroll 等要小的多。如果你要实现轮播图，完全可以使用 finger-mover 的轮播图插件，这比你使用 swiper 要划算的多。

在UC浏览器，手机QQ内的webview 都会出现此类问题。

看下图：

而 simulation-scroll-y 则不会出现这样的问题：

大多数的实现中，当多指操作时，会阻止运动，如下图：

另外一些不阻止滚动的实现中，虽然能滚动，但是也会出现奇葩的bug，如下图所示：

在这个实现中，虽然当第二根手指触摸屏幕时依然能够滚动，但是当拿开第一个手指时，连续滑动第二根手指，第二根手指并不能操作滚动元素，且在第二根手指滑动的过程中，连续使用第一根手指点按屏幕，会出现奇葩滚动动作。

以上问题，在 simulation-scroll-y 则不会出现，无论有几根手指触摸屏幕， simulation-scroll-y 都将控制权交给第一根手指，如果第一个手指拿开，那么第二根手指将继承第一根手指的状态，完美衔接滚动，此功能的实现得益于 Fingerd ，如下图：

一些现有实现中，在下拉刷新后，迅速上滑，然后再滑动下来，你会发现下拉挂掉了，永远收不回去，如下图：

另外的一些实现则规定了下拉刷新的形式：下拉后是停留等待还是不停留等待

而 simulation-scroll-y 则是完全给你自定义下拉操作的机会，你可以实现任何形式的下拉刷新操作，另外 simulation-scroll-y 在你滚动页面的过程中完全不会影响下拉操作，详情请查看 pullDown 选项。

有两种方法。

1、通过div的scrollTop变动控制垂直滚动条位置。通过div的scrollLeft变动控制水平滚动条位置。

示例：

<body>

//d1是外层div，带滚动条

</div>

</body>

document.getElementById('d1').scrollTop=100//通过scrollTop设置滚动到100位置

document.getElementById('d1').scrollLeft=200//通过scrollTop设置滚动到200位置

</script>

2、用html锚点

如下：

<a href="#test">aaaaa</a>

<div id="test">lalallalalalala</div>

扩展资料：

1、JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

（1）、是一种解释性脚本语言（代码不进行预编译）。

（2）、主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

（3）、可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

（4）、跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

2、JavaScript脚本语言具有以下特点:

(1)、脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

(2)、基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

(3)、简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

(4)、动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

(5)、跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

参考资料：百度百科：JavaScript

scroll，滚动，一般讨论的是网页整体与浏览器之间的关系。