自定义滚动条插件

snowLu 发布于2019-08-21 10:31 / 2132人阅读

摘要：本插件是对插件的一个封装。因为在用的时候需要同时引用和文件，同时还需要修改结构，比较麻烦，为了方便起见，将和文件都用引入，修改的方法也放在文件中。具体代码使用方法引入文件引入文件初始化滚动条为内容容器的主要的代码如下创建文本片段

本插件是对tinyscrollbar插件的一个封装。因为在用的时候需要同时引用css和js文件，同时还需要修改dom结构，比较麻烦，为了方便起见，将tinyscrollbar.css和tinyscrollbar.js文件都用js引入，修改dom的方法也放在js文件中。具体代码
使用方法：
1、引入jquery文件
2、引入scroll.js文件
3、初始化滚动条

window.onload = function(){
    //wrapper为内容容器的id
    scrollInit("wrapper");
}

主要的代码如下：

function scrollInit(conId){
        var conElem = document.getElementById(conId);
        //创建文本片段
        var fragment = document.createDocumentFragment();
        fragment.appendChild(createDom(conElem));

        var firstChild = document.body.firstChild;
        document.body.insertBefore( fragment, firstChild);

        loadCssFile("http://s3.qhimg.com/!35901b2d/jquery.tinyscrollbar.css");
        loadJSFile("http://s2.qhimg.com/!35901b2d/jquery.tinyscrollbar.js", scrollFn);
    }

云服务器服务器托管自定义html滚动条 jquery滚动条插件 jq滚动条插件自定义进度条

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85681.html

nicescroll插件在容器的宽度改变时滚动条的定位如何自适应

这几天做项目遇到了一个关于nicescroll插件在容器宽度改变时，滚动条的位置没有改变这个问题，贴出自己的解决方案，希望能对遇到和我一样问题的朋友们有所帮助。问题描述： showImg(https://segmentfault.com/img/bV4Dxi?w=1920&h=269); 如图，这个是我nicescroll自定义样式的滚动条 showImg(https://segmentfaul...

graf 2019-08-22 14:59 评论0 收藏0
tinyscrollbar锁滚动问题引出对wheel事件的探索

摘要：锁滚动问题近日做需求，发现一个常用插件突然出毛病了，于是探究了一番个中原因。但在最新版下，准确的说是系统环境下，发生了自定义滚动条锁滚动的问题。是通过监听页面滚轮事件，进一步进行设置内容位置来实现自定义滚动条的。 tinyscrollbar锁滚动问题近日做需求，发现一个常用插件jquery.tinyscrollbar突然出毛病了，于是探究了一番个中原因。出问题的场景在ie，chr...

leanote 2019-08-21 17:18 评论0 收藏0
Vue的自定义滚动，我用el-scrollbar

摘要：弄了一个持续更新的笔记，可以去看看，诚意之作本来就是写给自己看的链接地址此篇文章的地址的自定义滚动，我用基础笔记的地址可以也可以。大家总会见过不少滚动条比较优雅的实现，不可否认，美是让人愉悦的。弄了一个持续更新的github笔记，可以去看看，诚意之作（本来就是写给自己看的……）链接地址：Front-End-Basics 此篇文章的地址：Vue的自定义滚动，我用el-scrollb...

qylost 2019-08-26 11:54 评论0 收藏0
Vue的自定义滚动，我用el-scrollbar

摘要：弄了一个持续更新的笔记，可以去看看，诚意之作本来就是写给自己看的链接地址此篇文章的地址的自定义滚动，我用基础笔记的地址可以也可以。大家总会见过不少滚动条比较优雅的实现，不可否认，美是让人愉悦的。弄了一个持续更新的github笔记，可以去看看，诚意之作（本来就是写给自己看的……）链接地址：Front-End-Basics 此篇文章的地址：Vue的自定义滚动，我用el-scrollb...

enrecul101 2019-08-02 10:34 评论0 收藏0
jquery插件Nicescroll 3(非常类似IOS原生的滚动条) （转）

摘要：使用了很多的滚动条插件，如这次说说，支持水平滚动条，支持文本区和文档页面滚动条。，兼容所有的桌面浏览器。，兼容移动设备黑莓手机和芒果。，兼容所有触摸设备平板电脑窗口接口。，简单的安装和激活不破坏代码。使用了很多的滚动条插件，如Iscroll,swiper,这次说说Nicescroll 1，支持水平滚动条! 2，支持div,IFrames,文本区和文档页面滚动条。 3，兼容所有的桌面...

B0B0 2019-08-21 10:54 评论0 收藏0