自定義滾動(dòng)條插件

snowLu 發(fā)布于2019-08-21 10:31 / 2316人閱讀

摘要：本插件是對(duì)插件的一個(gè)封裝。因?yàn)樵谟玫臅r(shí)候需要同時(shí)引用和文件，同時(shí)還需要修改結(jié)構(gòu)，比較麻煩，為了方便起見(jiàn)，將和文件都用引入，修改的方法也放在文件中。具體代碼使用方法引入文件引入文件初始化滾動(dòng)條為內(nèi)容容器的主要的代碼如下創(chuàng)建文本片段

本插件是對(duì)tinyscrollbar插件的一個(gè)封裝。因?yàn)樵谟玫臅r(shí)候需要同時(shí)引用css和js文件，同時(shí)還需要修改dom結(jié)構(gòu)，比較麻煩，為了方便起見(jiàn)，將tinyscrollbar.css和tinyscrollbar.js文件都用js引入，修改dom的方法也放在js文件中。具體代碼
使用方法：
1、引入jquery文件
2、引入scroll.js文件
3、初始化滾動(dòng)條

window.onload = function(){
    //wrapper為內(nèi)容容器的id
    scrollInit("wrapper");
}

主要的代碼如下：

function scrollInit(conId){
        var conElem = document.getElementById(conId);
        //創(chuàng)建文本片段
        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);
    }

GPU云服務(wù)器云服務(wù)器自定義html滾動(dòng)條 jquery滾動(dòng)條插件 jq滾動(dòng)條插件自定義進(jìn)度條

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/85681.html

相關(guān)文章

nicescroll插件在容器的寬度改變時(shí) 滾動(dòng)條的定位如何自適應(yīng)

這幾天做項(xiàng)目遇到了一個(gè)關(guān)于nicescroll插件在容器寬度改變時(shí)，滾動(dòng)條的位置沒(méi)有改變這個(gè)問(wèn)題，貼出自己的解決方案，希望能對(duì)遇到和我一樣問(wèn)題的朋友們有所幫助。問(wèn)題描述： showImg(https://segmentfault.com/img/bV4Dxi?w=1920&h=269); 如圖，這個(gè)是我nicescroll自定義樣式的滾動(dòng)條 showImg(https://segmentfaul...

graf 2019-08-22 14:59 評(píng)論0 收藏0
tinyscrollbar鎖滾動(dòng)問(wèn)題引出對(duì)wheel事件的探索

摘要：鎖滾動(dòng)問(wèn)題近日做需求，發(fā)現(xiàn)一個(gè)常用插件突然出毛病了，于是探究了一番個(gè)中原因。但在最新版下，準(zhǔn)確的說(shuō)是系統(tǒng)環(huán)境下，發(fā)生了自定義滾動(dòng)條鎖滾動(dòng)的問(wèn)題。是通過(guò)監(jiān)聽(tīng)頁(yè)面滾輪事件，進(jìn)一步進(jìn)行設(shè)置內(nèi)容位置來(lái)實(shí)現(xiàn)自定義滾動(dòng)條的。 tinyscrollbar鎖滾動(dòng)問(wèn)題近日做需求，發(fā)現(xiàn)一個(gè)常用插件jquery.tinyscrollbar突然出毛病了，于是探究了一番個(gè)中原因。出問(wèn)題的場(chǎng)景在ie，chr...

leanote 2019-08-21 17:18 評(píng)論0 收藏0
Vue的自定義滾動(dòng)，我用el-scrollbar

摘要：弄了一個(gè)持續(xù)更新的筆記，可以去看看，誠(chéng)意之作本來(lái)就是寫(xiě)給自己看的鏈接地址此篇文章的地址的自定義滾動(dòng)，我用基礎(chǔ)筆記的地址可以也可以。大家總會(huì)見(jiàn)過(guò)不少滾動(dòng)條比較優(yōu)雅的實(shí)現(xiàn)，不可否認(rèn)，美是讓人愉悅的。弄了一個(gè)持續(xù)更新的github筆記，可以去看看，誠(chéng)意之作（本來(lái)就是寫(xiě)給自己看的……）鏈接地址：Front-End-Basics 此篇文章的地址：Vue的自定義滾動(dòng)，我用el-scrollb...

qylost 2019-08-26 11:54 評(píng)論0 收藏0
Vue的自定義滾動(dòng)，我用el-scrollbar

摘要：弄了一個(gè)持續(xù)更新的筆記，可以去看看，誠(chéng)意之作本來(lái)就是寫(xiě)給自己看的鏈接地址此篇文章的地址的自定義滾動(dòng)，我用基礎(chǔ)筆記的地址可以也可以。大家總會(huì)見(jiàn)過(guò)不少滾動(dòng)條比較優(yōu)雅的實(shí)現(xiàn)，不可否認(rèn)，美是讓人愉悅的。弄了一個(gè)持續(xù)更新的github筆記，可以去看看，誠(chéng)意之作（本來(lái)就是寫(xiě)給自己看的……）鏈接地址：Front-End-Basics 此篇文章的地址：Vue的自定義滾動(dòng)，我用el-scrollb...

enrecul101 2019-08-02 10:34 評(píng)論0 收藏0
jquery插件Nicescroll 3(非常類似IOS原生的滾動(dòng)條) （轉(zhuǎn)）

摘要：使用了很多的滾動(dòng)條插件，如這次說(shuō)說(shuō)，支持水平滾動(dòng)條，支持文本區(qū)和文檔頁(yè)面滾動(dòng)條。，兼容所有的桌面瀏覽器。，兼容移動(dòng)設(shè)備黑莓手機(jī)和芒果。，兼容所有觸摸設(shè)備平板電腦窗口接口。，簡(jiǎn)單的安裝和激活不破壞代碼。使用了很多的滾動(dòng)條插件，如Iscroll,swiper,這次說(shuō)說(shuō)Nicescroll 1，支持水平滾動(dòng)條! 2，支持div,IFrames,文本區(qū)和文檔頁(yè)面滾動(dòng)條。 3，兼容所有的桌面...

B0B0 2019-08-21 10:54 評(píng)論0 收藏0