2024年10月js scroll组件（如何使用JS控制DIV内容的滚动条）

　　⑴jsscroll组件（如何使用JS控制DIV内容的滚动条

　　⑵iScroll将尝试滚动到这个元素的左上角位置,js的onscroll、scrollTop、scrollHeight及window.scroll解释：当元素的滚动条滚动时触发的事件,这个值是滚动条将要对齐到的元素的选择器,所以iScroll只会作用到选择器选中元素的第一个,所以当设置overflow:auto时会出现滚动条,当拖动滚动条时就会触发wrap的onscroll事件,最基本的脚本初始化的方式如下：《scripttype="text/javascript"》??varmyScroll=newIScroll(’#wrapper’);《/script》**第一个参数可以是滚动容器元素的DOM选择器字符串**,比如下面：varmyScroll=newIScroll(’#wrapper’,{??snap:’li’});这个示例中滚动条将会对齐到每一个LI标记的元素。

　　⑶如何使用JS控制DIV内容的滚动条

　　⑷首先需要新建一个HTML文档，这里设立一下基本的架构。

　　⑸再新建一个CSS文件，用link关联一下HTML文档。

　　⑹创建DIV标签，并且往里面填充内容。

　　⑺先设定一下滚动条内框的大小。

　　⑻用border先来查看是否有超出，这里可以看出超出了很多内容。

　　⑼overflow-y:scroll;overflow-x:scroll;加上这个样式滚动条就会出现了。

　　⑽现在就能对轨道和滚动条进行样式的设置了。

　　⑾js的onscroll、scrollTop、scrollHeight及window.scroll

　　⑿解释：当元素的滚动条滚动时触发的事件。onscroll事件貌似任何实体元素都可以绑定，这里的实体元素包括DOM元素、window元素、document元素。用法即：element.onscroll=function(){};需要注意的是，滚动条一定要出现，而且滚动条是属于这元素的，例如：因为外层wrap的高度小于内层inner的高度，所以当设置overflow:auto时会出现滚动条，当拖动滚动条时就会触发wrap的onscroll事件，而不是inner的onscroll事件，即这滚动条属于wrap而不是属于inner，明白这点十分重要，对下面理解的scrollTop、scrollHeight一样道理。解释：元素滚动条内的顶部隐藏部分的高度。scrollTop属性只有DOM元素才有，window/document没有。用法：获取值vartop=element.scrollTop;//返回数字，单位像素用法：设置值element.scrollTop=;对上面的例子来说，控制滚动条的位置是wrap.scrollTop=xx;而不是inner.scrollTop，道理同上。兼容性问题：获得整个文档scrollTop，IE是document.documentElement.scrollTop，FF/CH则是document.body.scrollTop.解释：元素滚动条内的内容高度。scrollHeight同scrollTop属性一样，只有DOM元素才有，window/document没有。不同的是scrollHeight是只读，不可设置。兼容性问题：获取整个文档scrollHeight，IE/FF/CH都可以通过document.documentElement.scrollHeight或document.body.scrollHeight获得。此外还有scrollLeft，scrollWidth，道理是一样的。这个是全局函数，最新的IE/FF/CH都支持。window.scroll(x,y)是让window滚动条滚动到那个x,y坐标。//x是水平坐标，y是垂直坐标。window.scrollBy(-x,-y)是让window滚动条相对滚动到某个坐标，-即相对向左/向上滚动像素。window.scrollTo(x,y)和window.scroll(x,y)一样。

　　⒀如何使用iscroll.js插件

　　⒁如何使用iscroll.js插件

　　⒂前端博客?前端开发资源?|?移动前端开发?JavaScript?|?JavaScript插件?View

　　⒃这篇文章讲到了iscroll的一些使用入门、参数配置和示例，并讲到了滚动条的接口，自定义事件和销毁动作等。原文：iscroll.js的使用

　　⒄Scroll是一个类，每个需要使用滚动功能的区域均要进行初始化。每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的。

　　⒅尽可能保持DOM结构的简洁。iScroll使用硬件合成层但是有一个限制硬件可以处理的元素。最佳的HTML结构如下：

　　⒆iScroll作用于滚动区域的外层。在上面的例子中，UL元素能进行滚动。只有容器元素的第一个子元素能进行滚动，其他子元素完全被忽略。

　　⒇最基本的脚本初始化的方式如下：

　　⒈**第一个参数可以是滚动容器元素的DOM选择器字符串**，**也可以是滚动容器元素的引用对象**。下面是一个有效的语法：

　　⒉所以基本上你要么直接传递元素，要么传递一个querySelector字符串。因此可以使用css名称代替ID去选择一个滚动器容器,如下:

　　⒊注意，iScroll使用的是querySelector而不是querySelectorAll，所以iScroll只会作用到选择器选中元素的第一个。如果你需要对多个对象使用iScroll，你需要构建自己的循环机制。

　　⒋当DOM准备完成后iScroll需要被初始化。最保险的方式是在w**indow的onload事件中启动它**。在**DOMContentLoaded**事件中或者**inlineinitialization**中做也可以，需要记住的是脚本需要知道滚动区域的高度和宽度。***如果你有一些图片在滚动区域导致不能立马获取区域的高度和宽度，iScroll的滚动尺寸有可能会错误***。

　　⒌为滚动起容器增加position:relative或者absolute样式。这将解决大多数滚动器容器大小计算不正确的问题。综上所述，最小的iScroll配置如下：

　　⒍**注：**如果你有一个复杂的DOM结构，最好在onload事件之后适当的延迟，再去初始化iScroll。最好给浏览器或者毫秒的间隙再去初始化iScroll。

　　⒎在iScroll初始化阶段可以通过构造函数的第二个参数配置它。

　　⒏上面的例子示例了在iScroll初始化时开启鼠标滚轮支持和滚动条支持。

　　⒐iScroll使用基于设备和浏览器性能的各种技术来进行滚动。通常不需要你来配置引擎，iScroll会为你选择最佳的方式。

　　⒑尽管如此，理解iScroll工作机制和了解如何去配置他们也是很重要的。

　　⒒options.useTransform

　　⒓默认情况下引擎会使用**CSStransform**属性。如果现在还是年，那么可以设置这个属性为false，这就是说：引擎将使用top/left属性来进行滚动。这个属性在滚动器感知到Flash，iframe或者视频插件内容时会有用，但是需要注意：性能会有极大的损耗。默认值：true

　　⒔options.useTransition

　　⒕iScroll使用**CSS?transition**来实现动画效果（动量和弹力。如果设置为false，那么将使用requestAnimationFrame代替。在现在浏览器中这两者之间的差异并不明显。在老的设备上transitions执行得更好。默认值：true

　　⒖options.HWpositing

　　⒗这个选项尝试使用**translateZ()**来把滚动器附加到硬件层，以此来改变CSS属性。在移动设备上这将提高性能，但在有些情况下,你可能想要禁用它(特别是如果你有太多的元素和硬件性能跟不上)。默认值：true

　　⒘*注：***如果不确定iScroll的最优配置。从性能角度出发，上面的所有选项应该设置为true。（或者更好的方式，让他们自动设置属性为true。你可以尝试这配置他们，但是要小心内存泄漏。

　　⒙滚动条不只是像名字所表达的意义一样，在内部它们是作为indicators的引用。

　　⒚一个指示器侦听滚动条的位置并且现实它在全局中的位置，但是它可以做更多的事情。先从最基本的开始。

　　⒛options.scrollbars

　　正如我们在基本功能介绍中提到的，激活滚动条只需要做一件事情，这件事情就是：

　　当然这个默认的行为是可以定制的。

　　当然还可以通过编程来进行滚动。

　　scrollTo(x,y,time,easing)

　　对应存在的一个叫做myScroll的iScroll实例，可以通过下面的方式滚动到任意的位置：

　　通过上面的方式将向下滚动个像素。记住：永远是左上角。需要滚动你必须传递负数。time和easing是可选项。他们控制滚动周期（毫秒级别和动画的擦除效果。擦除功能是一个有效的IScroll.utils.ease对象。例如应用一个一秒的经典擦除动画你应该这么做：

　　擦除动画的类型选项有：quadratic,circular,back,bounce,elastic。

　　scrollBy(x,y,time,easing)

　　和上面一个方法类似，但是可以传递X和Y的值从当前位置进行滚动。

　　上面这个语句将在当前位置向下滚动个像素。如果你当前所在位置为-，那么滚动结束后位置为-.

　　scrollToElement(el,time,offsetX,offsetY,easing)

　　这是一个很有用的方法，你会喜欢它的。在这个方法中只有一个强制的参数就是el。传递一个元素或者一个选择器，iScroll将尝试滚动到这个元素的左上角位置。time是可选项，用于设置动画周期。offsetX和offsetY定义像素级的偏移量，所以你可以滚动到元素并且加上特别的偏移量。但并不仅限于此。如果把这两个参数设置为true，元素将会位于屏幕的中间。easing参数和scrollTo方法里的一样。

　　iScroll能对齐到固定的位置和元素。

　　options.snap

　　最简单的对齐配置如下：

　　这将按照页面容器的大小自动分割滚动条。snap属性也可以传递字符类型类型的值。这个值是滚动条将要对齐到的元素的选择器。比如下面：

　　这个示例中滚动条将会对齐到每一个LI标记的元素。下面将帮助你快速浏览iScroll提供的关于对齐的一系列有趣的方法。

　　goToPage(x,y,time,easing)

　　x和y呈现你想滚动到横向轴或者纵向轴的页面数。如果你需要在单个唯独上使用滚动条，只需要为你不需要的轴向传递值。time属性是动画周期，easing属性是滚动到指定点使用的擦除功能类型。请参考高级功能中的option.bounceEasing。这两个属性都是可选项。

　　myScroll.goToPage(,,);上面这个例子将在一秒内沿着横向滚动到第页。

　　滚动到当前位置的下一页或者前一页。

　　为了使用缩放功能，你最好使用iscroll-zoom.js脚本。和前面的示例一样，一个好的缩放功能的配置如下：

　　iScroll需要知道包装器和滚动器确切的尺寸，在iScroll初始化的时候进行计算，如果元素大小发生了变化，需要告诉iScrollDOM发生了变化。下面将提供调用refresh方法的正确时机。

　　每次触摸DOM，浏览器渲染器重绘页面。一旦发生了重画我们可以安全地读新的DOM属性。重新绘制阶段不是瞬时发生的只是范围结束时触发。这就是为什么我们需要给渲染器刷新iScroll之前一点时间。

　　为了确保javascript得到更新后的属性，应该像下面的例子这样使用刷新方法：

　　这里调用refresh()使用了零秒等待，如果你需要立即刷新iScroll边界就是如此使用。当然还有其他方法可以等待页面重绘，但零超时方式相当稳定。

　　**注：***如果你有一个相当复杂的HTML结构，你应该给浏览器更多的执行事件，可以设置到毫秒的超时时间。这通常适用于所有任务必须在DOM上进行。通常给渲染器一些执行的时间。*

　　iScroll还提供额一些你可以挂靠的有用的自定义事件。使用on(type,fn)方法注册事件。

　　上面的代码会在每次滚动停止是执行doSomething方法。可以挂靠的事件如下：

　　beforeScrollStart，在用户触摸屏幕但还没有开始滚动时触发。scrollCancel，滚动初始化完成，但没有执行。scrollStart，开始滚动scroll，内容滚动时触发，只有在scroll-probe.js版本中有效，请参考onScrollevent。scrollEnd，停止滚动时触发。flick，用户打开左/右。zoomStart，开始缩放。zoomEnd，缩放结束。

　　你可以激活keyBindings选项来支持键盘控制。默认情况下iScroll监听方向键，上下翻页建，home/end键，但这些按键绑定完全可以自定义。你可以通过传递一个包含按键代码列表的对象来进行按键绑定。默认的按键值如下:

　　当然你也可以传递字符串进行按键绑定（例如：pageUp:’a’。只要你设置了对于的按键值，那么iScroll就会响应你的设置。

　　iScroll存储了很多有用的信息，您可以使用它们来增强您的应用。你可能会发现有用的：

　　myScroll.x/y，当前位置myScroll.directionX/Y，最后的方向(-down/right,still,up/left)myScroll.currentPage，当前对齐捕获点下面是关于处理时间的代码示例：

　　如果x位置是低于-像素滚轮停止时，上述执行某些代码。请注意我用这个产品而不是myScroll，您可以使用两个当然，但iScroll传递本身作为这种情况下，当触发自定义事件的功能。

　　在不需要使用iScoll的时候调用iScroll实例的公共方法destroy()可以释放一些内存。