`
jj7jj7jj
  • 浏览: 50313 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论
阅读更多
背景:
如果遇到需要给滚动条加样式的情况,在ie浏览器下可以通过样式解决,像火狐和chrome就没辙了,与其用些畸形的样式或者技巧,还不如干脆自己做一个

功能:
1)保持浏览器默认滚动条的行为:当内容超过高度时给出滚动条;支持鼠标滚轴;当鼠标移动到顶部或者底部时,滚动条自动向上或向下移动,移动到顶端或者下端则停止;当添加内容时会重新渲染滚动条,中间的滚动块会根据内容等比例缩小

2)兼容各浏览器

属性:
id : 需要绑定的元素的id
moveSize : 每移动一个单位的像素
callback : 当移动到底部时会触发

方法
moveTo : 移动到给定的top值,到超过滑块高度时,会默认为顶端

例子:

<div style="width:450px; height:400px;" id="haha">
.
.
.
var te = new scroller(
     {
        id : "haha",
        moveSize : 10,
        callback : function(){ alert("现在已经是底部了,可以追加内容噢~"); }
      }
);


扩展:
如果需要改成图片,只需要修改this.con.innerHTML = .. 这个部分
1
1
分享到:
评论

相关推荐

    js自定义滚动条插件

    JavaScript 自定义滚动条插件是一种用于美化网页默认滚动条,增强用户体验的技术。通过编写或使用已有的JS库,我们可以根据设计需求定制滚动条的颜色、形状、大小以及交互效果。这样的插件通常支持自定义滚动按钮的...

    JS自定义滚动条,可以自定义很多类型的网页滚动条

    为了实现跨浏览器的JS自定义滚动条,我们可以借助JavaScript库,如Perfect Scrollbar、SimpleBar、Malihu Custom Scrollbar等。这些库通过监听滚动事件并模拟滚动行为,来实现自定义滚动条的功能。例如,Perfect ...

    javascript自定义滚动条样式

    JavaScript 自定义滚动条样式是一种常见的前端技术,它允许开发者通过 CSS 和 JavaScript 对浏览器默认的滚动条进行美化和个性化,以提升用户体验和界面设计的一致性。在网页设计中,滚动条往往是不可忽视的一部分,...

    js 自定义滚动条样式

    js 自定义滚动条样式 颜色大小在css调节 绑定节点在js代码第一个函数修改

    用js自定义滚动条样式(可使用图片哦)

    标题“用js自定义滚动条样式(可使用图片哦)”正是指向这样一个技术主题,即如何利用JavaScript和CSS来定制具有个性化外观的滚动条,特别是通过使用图片来增强其视觉效果。 滚动条是网页中非常常见的一种元素,它...

    自定义滚动条插件

    **自定义滚动条插件——mCustomScrollbar** 在网页设计中,滚动条作为一个常见的交互元素,它的样式和功能往往被忽视。然而,随着用户界面设计的精细化,自定义滚动条成为了提升用户体验的重要手段。...

    原生javascript自定义滚动条(兼容IE,火狐,chrom)

    本篇文章将深入探讨如何使用JavaScript实现自定义滚动条,并确保其在Internet Explorer(IE)、Firefox和Chrome等主流浏览器中的兼容性。 首先,我们需要理解不同浏览器对滚动条的支持情况。在CSS中,Webkit内核的...

    JS自定义滚动条效果简单实现代码

    本文实例为大家分享了JS自定义滚动条效果的具体代码,供大家参考,具体内容如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;自定义滚动条&lt;/title&gt; &lt;style...

    javascript自定义滚动条实现代码.docx

    JavaScript 实现自定义滚动条 在 Web 开发中,我们经常会遇到内容超出固定范围的问题,这时我们需要使用滚动条来显示超出部分的内容。但是,使用默认的滚动条往往不能满足我们的需求,于是我们需要使用 JavaScript ...

    jquery自定义滚动条插件

    只需为每个需要自定义滚动条的元素添加特定的类名,并在JavaScript中分别初始化它们即可。 ```javascript // 初始化第一个滚动条 $('.scrollbar1').customScrollbar(); // 初始化第二个滚动条 $('.scrollbar2')....

    react-基于react的自定义滚动条组件

    本文将详细讲解如何基于React创建一个自定义滚动条组件,并探讨相关的关键知识点。 首先,React是一个流行的JavaScript库,用于构建用户界面,特别是单页应用。它采用声明式编程风格,使得代码易于理解和维护。在...

    利用div+jquery自定义滚动条

    在这里,`div`可以作为我们需要自定义滚动条的容器,通过设置`overflow`属性来控制内容超出时是否显示滚动条。例如,如果想让div在内容过多时显示横向滚动条,可以这样设置CSS样式: ```css div.scroll-container {...

    自定义滚动条 scroll js滚动条

    "自定义滚动条 scroll js滚动条"就是这样一个主题,它涉及到JavaScript库,如jQuery和jScroll,以及图像资源的使用,来实现滚动条的个性化效果。 首先,jQuery.js是广泛使用的JavaScript库,它简化了DOM操作,事件...

    自定义滚动条

    ### 自定义滚动条知识点 #### 一、概念与应用场景 自定义滚动条是前端开发中一个常见的需求。在默认情况下,浏览器会为超出容器显示范围的内容自动添加滚动条。但这些滚动条样式单一且功能简单,无法满足某些设计...

    javascript 美化滚动条 可自定义图片

    通过阅读和分析这些源码,开发者可以学习到如何利用JavaScript创建自定义滚动条,以及如何实现过渡动画。 在实际应用中,要根据项目需求选择合适的库或编写自定义代码。同时,考虑到性能和可维护性,应尽量避免过度...

    js实现自定义滚动条

    js实现自定义滚动条,有详细的中文注释,适合新手

    UI JQuery自定义滚动条插件.zip

    UI JQuery自定义滚动条插件是 jquery自定义滚动条的UI JQuery插件。 UI JQuery自定义滚动条插件演示图: 点击查看演示:

    JS自定义图片滚动条

    2. 针对其他浏览器,利用JavaScript库如`perfect-scrollbar`或`malihu-custom-scrollbar-plugin`实现跨浏览器的自定义滚动条。 3. 结合图片和图标库(如Font Awesome)提升滚动条的视觉效果。 4. 考虑性能优化,确保...

    JQUERY插件之自定义滚动条DEMO

    在这个DEMO中,"ttScrollBar.js"很可能包含了实现自定义滚动条逻辑的核心JavaScript代码。这个插件可能通过监听滚动事件,动态改变滚动条的大小、位置和样式,以实现定制化的用户体验。 在CSS方面,我们可以使用伪...

Global site tag (gtag.js) - Google Analytics