自定義滾動條插件

snowLu 發布于2019-08-21 10:31 / 2243人閱讀

摘要：本插件是對插件的一個封裝。因為在用的時候需要同時引用和文件，同時還需要修改結構，比較麻煩，為了方便起見，將和文件都用引入，修改的方法也放在文件中。具體代碼使用方法引入文件引入文件初始化滾動條為內容容器的主要的代碼如下創建文本片段

本插件是對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);
    }

云服務器 GPU云服務器自定義html滾動條 jquery滾動條插件 jq滾動條插件自定義進度條

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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