為什麽別人網頁的滾動條辣麽好看~

阿新 • • 發佈：2017-11-30

back into flash urn scroll point yii min alt

其實我們一樣可以很個性。。^_^

效果實現：（附效果圖）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <style>
            body,
            html {
                margin:  
0;
                width: 100%;
                height: 100%;
            }
            
            ul,
            li {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            
            .scrollBox {
                width: 100%;
                height:  
100%;
                overflow: hidden;
                padding-right: 15px;
                box-sizing: border-box;
            }
            
            .cBox {
                width: 100%;
                /*float: left;*/
            }
            
            .sBox {
                width: 15px;
                height:  
100%;
                /*float: right;*/
                position: absolute;
                top: 0;
                right: 0;
                background-image: linear-gradient(rgba(188,57,75,0.8) 0%,rgba(38,70,173,0.5) 100%);
                box-shadow: 0 0 15px 3px rgba(0,0,0,0.5) inset;
            }
            
            li {
                width: 100%;
            }
            
            img {
                display: block;
                width: 100%;
            }
            
            .tool {
                width: 100%;
                border-radius:7px;
                position: relative;
                left: 0px;
                top: 0px;
                text-align: center;
                /*background-color: skyblue;*/
                background-image: linear-gradient(skyblue 0%,pink 100%);
                box-shadow: 0 0 20px 2px #FFFF99 inset;                
                cursor: pointer;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                //獲取觸發滾動事件的元素
                var scrollBox = document.querySelector(‘.scrollBox‘);
                //創建滾動結構：
                //--------------

                //獲取和子元素
                var cBox = scrollBox.querySelector(‘.cBox‘);
                var sBox = scrollBox.querySelector(‘.sBox‘);
                var tool = scrollBox.querySelector(‘.tool‘);
                initWheel();
                //滾動條初始化
                function initWheel() {
                    //計算滾動條高度
                    var H1 = cBox.offsetHeight;
                    var H2 = scrollBox.clientHeight;
                    var h1 = sBox.offsetHeight;
                    //求出h2的高度
                    var h2 = H2 / H1 * h1;
                    //                    console.log(h2)
                    tool.style.height = h2 + ‘px‘;
                    tool.style.lineHeight = h2 + ‘px‘;
                }
                    var site = tool.offsetTop;
                    var speed = 10;
                    wheel({
                        obj: scrollBox,
                        up: function() {
                            site -= speed;
                            //邊界處理
                            if(site <= 0) {
                                site = 0;
                            }
                            tool.style.top = site + ‘px‘;
                            cBox.style.marginTop = -(cBox.offsetHeight * (site / sBox.clientHeight)) + ‘px‘;
                        },
                        down: function() {
                            site += speed;
                            //邊界處理
                            if(site >= sBox.clientHeight - tool.offsetHeight) {
                                site = sBox.clientHeight - tool.offsetHeight;
                            }
                            tool.style.top = site + ‘px‘;
                            cBox.style.marginTop = -(cBox.offsetHeight * (site / sBox.clientHeight)) + ‘px‘;
                        }
                    });
                    
                    //拖動滾動條
                    tool.onmousedown = function(ev){
                        var ev=ev||event;
                        ev.preventDefault();
                        var x1 = ev.clientX;
                        var y1 =ev.clientY;
                        document.onmousemove = function(ev){
                            var ev=ev||event;
                            ev.preventDefault();
                            var x2 = ev.clientX;
                            var y2 =ev.clientY;
                            
                            var x = Math.abs(x2-x1);
                            var y = y2-y1;
                            
                            //邊界處理
                            var m =site+y;
                            if(m<=0){
                                m=0;
                            };
                            if(m>=sBox.clientHeight-tool.offsetHeight){
                                m=sBox.clientHeight-tool.offsetHeight;
                            };
                            tool.style.top=m+‘px‘;
                            cBox.style.marginTop = -cBox.offsetHeight*(m/sBox.clientHeight)+‘px‘;
                            if(x>200){//x超過滾動條200時取消事件
                                site = tool.offseetTop;//這裏記錄變化後的位置
                                document.onmousemove = null;
                            }
                        }
                        document.onmouseup = function(){
                            site = tool.offsetTop;//記錄變化後的位置
                            document.onmousemove = null;
                        }
                    }
                    

                    /*
                     * 
                     * //滾輪事件方法：
                     * 功能：綁定滾輪事件
                     * 參數：
                     * option {
                     *
                     *   obj： 觸發事件的元素
                     *   up:  滾輪向上滾動要執行的函數
                     *   down: 滾輪向下滾動要執行的函數
                     *
                     * }
                     * 
                     * */

                    function wheel(option) {
                        //自定義錯誤提示
                        if(!option) {
                            console.log(‘錯誤碼10086:參數不正確‘);
                            return false;
                        }
                        var opt = {
                            obj: option.obj || documen,
                            up: option.up || null,
                            down: option.down || null,
                        };
                        opt.obj.onmousewheel = function(ev) {
                            var ev = ev || event;
                            if(ev.wheelDelta < 0) {
                                console.log(‘向下‘)
                                opt.down && opt.down();
                            }
                            if(ev.wheelDelta > 0) {
                                console.log(‘向上‘)
                                opt.up && opt.up();
                            }
                        }
                        opt.obj.addEventListener(‘DOMMouseScroll‘, function(ev) {

                            var ev = ev || event;

                            //                                            console.log(ev.detail);

                            if(ev.detail > 0) {
                                //                    console.log(‘向下‘);
                                opt.down && opt.down();
                            }
                            if(ev.detail < 0) {
                                //                                                    console.log(‘向上‘);
                                opt.up && opt.up();
                            }
                        });
                    }
            }
        </script>
    </head>

    <body>
        <section class="scrollBox">
            <div class="cBox">
                <ul>
                    <li>
                        <img src="img/1.jpg"  />
                    </li>
                    <li>
                        <img src="img/2.jpg"  />
                    </li>
                    <li>
                        <img src="img/3.jpg"  />
                    </li>
                    <li>
                        <img src="img/4.jpg"  />
                    </li>
                    <li>
                        <img src="img/5.jpg"  />
                    </li>
                    <li>
                        <img src="img/6.jpg"  />
                    </li>
                    <li>
                        <img src="img/7.jpg"  />
                    </li>
                    <li>
                        <img src="img/8.jpg"  />
                    </li>
                    <li>
                        <img src="img/9.jpg"  />
                    </li>
                </ul>
            </div>
            <div class="sBox">
                <span class="tool glyphicon glyphicon-flash" href="javascript:;"></span>
            </div>
        </section>
    </body>

</html>

技術分享圖片

各位大神有什麽好的意見和指導敬請賜教~~

為什麽別人網頁的滾動條辣麽好看~

back into flash urn scroll point yii min alt 其實我們一樣可以很個性。。^_^ 效果實現：（附效果圖） <!DOCTYPE html> <html> <head> &

jq消除網頁滾動條

鼠標滾輪事件 init 滾動 scroll color lin 滾動條速度組件網頁有些時候需要能滾動的效果，但是不想要滾動條，我就遇到了這樣的需求。自己用jq寫了一個垂直滾動條。純css也可以實現 .box::-webkit-scrollbar{display:n

jQuery 自定義網頁滾動條樣式外掛 mCustomScrollbar 的介紹和使用方法

系統預設的滾動條樣式，真的已經看的夠噁心了。試想一下，如果在一個很有特色和創意的網頁中，出現了一根系統中預設的滾動條樣式，會有多麼的彆扭。為了自己定義網頁中的滾動條的方法，我真的已經找了很久了，就目前尋找的成果來說，找到了兩個比較不錯的 jQuery 外掛：jScrollPane 和 mCustomSc

WPF為樹控制元件增加滾動條

1、首先將treeview新增到panel中，格式大概是Panel.Children.Add(TreeView) 2、為panel設定滾動條：在xaml介面，找到panel的定義，格式如下： <StackPanel x:Name="Panel" Horiz

純css3自定義網頁滾動條，瀏覽器統一scroll滾動條

支援-webkit-字首的瀏覽器，滾動欄有五個css修飾: 整體部分, ::-webkit-scrollbar 兩端按鈕, ::-webkit-scrollbar-button 外層軌道, ::-webkit-scrollbar-track 內層軌道

mysql互為主從的環境，更新一條語句同時提交，為什麽會出現數據不一致？

mysql互為主從的環境更新一條語句同時提交為什麽會出現數據不一致？ mysql互為主從的環境，更新一條語句同時提交，為什麽會出現數據不一致？m1：begin;update t1 set c2=‘b1‘ where c1=2;commit;m2:begin;update t1 set c2=‘

為什麽別人一周搞定Linux，而你卻做不到

shell腳本我給大家精選準備了4段Shell實戰腳本 / 基礎Linux常用命令；也許能解決你很多實際工作問題；如果看到這些你不知道它能用來幹嘛，先收藏、先記住吧，以後用的上～實戰命令一：在實際的工作中，我們經常需要將多個文件同時移動到一個指定的目錄下，如果一個一個移動，太折騰...你應該要知道：mv 有一

同樣是做內容創業，你為什麽沒有別人賺得多？

互聯網普通人意誌力執行力大眾 time制作，圖片內裝飾素材來源於網絡1.內容創業是這個時代的大機遇，借助互聯網的大流量，幾乎人人都可以通過內容來賺錢。這是我們這個時代的大福利。很多人面對內容創業都躍躍欲試，擼起袖子準備大幹一場。不過，在具體的行動過程中，總有人會有這樣的感觸，自己明

ScrollView（RecyclerView等）為什麽會自動滾動原理分析，還有阻止自動滑動的解決方案

code win 展示態度來看我們兩個 pro 獲取引言，有一天我在調試一個界面，xml布局裏面包含Scroll View，裏面嵌套了recyclerView的時候，界面一進去，就自動滾動到了recyclerView的那部分，百思不得其解，上網查了好多資料，大部分

為什麽別人的工作效率總是比你快？原來是掌握了這幾個Excel技巧

col 大小別人技巧 size watermark ado 高效 ade 掌握一些最基本的Excel技巧可以有效地提高工作效率。下面給大家分享4個實用的Excel的技巧，能夠幫你在工作上節省大量的時間！快速整理表格中的數據選中單元格數據，按“Ctrl+1”快捷鍵彈出

利用Python來爬取“吃雞”數據，為什麽別人能吃雞？

手遊網絡 ase -c 還原 bin oss art ade 首先，神裝鎮樓背景最近老板愛上了吃雞（手遊：全軍出擊），經常拉著我們開黑，只能放棄午休的時間，陪老板在沙漠裏奔波。上周在在微信遊戲頻道看戰績的時候突發奇想，是不是可以通過這個方式抓取到很多戰鬥數據，然後分析

微信和QQ內置瀏覽器為什麽老是彈停止訪問該網頁，微信域名被屏蔽的解決辦法

蜘蛛一個交流搜索引擎很多內容指向防止用戶近來很多商家開始重視域名防封的技術了，為什麽呢，因為實在是封怕了。三天兩頭就得去換域名，換域名是小事，用戶流失就是大事了，直接跟利益掛鉤的。那麽域名防封技術究竟有多重要呢？又該如何實現域名防封呢？下面給大家分享一

同樣是Java程序員，為什麽別人比你更優秀？

分析化工角色的人才會不清楚百萬發展 java程序對工作1-3年的程序員來說，依據個人情況提前規劃未來職業發展方向，這很重要。譬如，在未來3-5年甚至更久，工作要做到什麽程度？往哪個方向發展?通過怎樣的路徑才能實現目標？如果沈浸在當下“程序員高薪”的論調中歲月

為什麽我會選擇走 Java 這條路？

論文小夥伴本科生讀者 shu 職業發展 mage 工作玩遊戲閱讀本文大概需要 2.8 分鐘。作者：黃小斜文章來源：微信公眾號【程序員江湖】最近有一些小夥伴問我，為什麽當初選擇走Java這條路，為什麽不做C++、前端之類的方向呢，另外還

在亞馬遜中別人都在跟賣，為什麽就我死了？安全跟賣方法了解一下. yunfei288666

提升競爭操作技巧轉化的人找到用戶而不是要求本文由小編：yunfei288666 創作 1.產品跟賣的人少的不要進行跟賣當我們找到一個自己想要跟賣的產品，但是在產品的頁面下跟賣的人員很少的話，我們就不要進行跟賣了，因為一款好的產品就像是一款肥肉，人人都在盯

自然語言處理中的Attention Model：是什麽及為什麽

異常的數字拋出，為什麽會出現錯誤？（未解決）

為什麽 class a light divide true vid main catch blog #include <iostream> using namespace std; class A { public: A(int a, int b) {

為什麽網上支付後卻收不到貨

inf 識別 fill 樣本 info sso 選擇 nts 得到我們發現了各種網絡犯罪分子利用監控受害者郵箱所收集來的信息以從企業竊取金錢的方法，當中“變更供貨商”是最值得註意的。步驟一:選擇官方服務郵箱成為犯罪目標我們發如今此案例中，網絡犯罪分子專門針

分針網——每日分享：標簽為什麽要語義化？

標簽 1、手持移動設備的無障礙閱讀手持移動設備如PDA、智能手機等可能對CSS的解析能力較弱，這時可能就需要更語義的標簽來體現一個頁面的易讀性 2、盲人等一些障礙人士的更好地閱讀屏幕閱

前端優化之動畫為什麽要盡量用css3代替js

視覺空間好處畫的動畫效果沒有不可見我們瀏覽器導致JavaScript效率低的兩大原因：操作DOM和使用頁面動畫。通常我們會通過頻繁的操作 DOM的CSS來實現視覺上的動畫效果，導致js效率低的兩個因素都包括在內了在頻繁的操作DOM和CSS時，瀏覽器會不停的

為什麽別人網頁的滾動條辣麽好看~

相關推薦