niceScroll.js 搭配 boostrap 的 modal 組件 js 設定&改變滾動條樣式方法支援多瀏覽器

▼css部分可做以下設定

/* 设置滚动条的样式 */
.right_info::-webkit-scrollbar {
width:12px;
}
/* 滚动槽 */
.right_info::-webkit-scrollbar-track {
-webkit-box-shadow:inset006pxrgba(255,255,255,1);
border-radius:10px;
background:rgba(255,255,255,1);
}
/* 滚动条滑块 */
.right_info::-webkit-scrollbar-thumb {
border-radius:10px;
background:rgba(24,65,144) !important;
-webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
.right_info::-webkit-scrollbar-thumb:window-inactive {
background:rgba(255,0,0,0.4);
}
/* 滚动条ie */
.right_info{
  scrollbar-base-color: #ffffff;
  scrollbar-face-color: #144190;
  scrollbar-3dlight-color: #ffffff;
  scrollbar-highlight-color: #ffffff;
  scrollbar-track-color: #ffffff;
  scrollbar-shadow-color: #ffffff;
  scrollbar-dark-shadow-color: #ffffff;
}


▼niceScroll.js可做以下設定

var explorer = window.navigator.userAgent;
    if (explorer.indexOf("MSIE") >= 0) {//ie10及以下


    }else if(explorer.indexOf("Edge") > -1){//Edge
        $(".right_info").niceScroll({
            touchbehavior:true,  //是否是触摸式滚动效果
            cursorcolor: "#144190", // 改变滚动条颜色，使用16进制颜色值
            cursorwidth: "10px", // 滚动条的宽度，单位：便素
            cursorborder: "1px solid rgba(255,255,255,1)", // CSS方式定义滚动条边框
            autohidemode: false,//滚动条是否是自动隐藏，默认值为 true
            background: "rgba(255,255,255,1)", // 轨道的背景颜色
            cursorborderradius: "5px", // 滚动条圆角（像素）
            cursordragontouch: true, // 使用触屏模式来实现拖拽
        });
    }else if (explorer.indexOf("Firefox") >= 0){//Firefox
        $(".right_info").niceScroll({
            touchbehavior:true,  //是否是触摸式滚动效果
            cursorcolor: "#144190", // 改变滚动条颜色，使用16进制颜色值
            cursorwidth: "10px", // 滚动条的宽度，单位：便素
            cursorborder: "1px solid rgba(255,255,255,1)", // CSS方式定义滚动条边框
            autohidemode: false,//滚动条是否是自动隐藏，默认值为 true
            background: "rgba(255,255,255,1)", // 轨道的背景颜色
            cursorborderradius: "5px", // 滚动条圆角（像素）
            cursordragontouch: true, // 使用触屏模式来实现拖拽
        });
    }else if (explorer.indexOf("Chrome") >= 0){//Chrome

    }else if (explorer.indexOf("Opera") >= 0){//Opera

    }else if (explorer.indexOf("Safari") >= 0){//Safari
        $(".right_info").niceScroll({
            touchbehavior:true,  //是否是触摸式滚动效果
            cursorcolor: "#144190", // 改变滚动条颜色，使用16进制颜色值
            cursorwidth: "10px", // 滚动条的宽度，单位：便素
            cursorborder: "1px solid rgba(255,255,255,1)", // CSS方式定义滚动条边框
            autohidemode: false,//滚动条是否是自动隐藏，默认值为 true
            background: "rgba(255,255,255,1)", // 轨道的背景颜色
            cursorborderradius: "5px", // 滚动条圆角（像素）
            cursordragontouch: true, // 使用触屏模式来实现拖拽
        });
    }else if (explorer.indexOf("Trident/7.0") >= 0){//IE11
        // alert('ie11')
    }


    //當點擊按鈕叫出modal時做以下設定，niceScroll上面設定一次，下面也要再設定一次畫面才不會跑掉
    $('.page2_btn2').click(function(){
        // console.log('點擊btn2')
        $('#info2').modal('show');
        $(".modal-body").getNiceScroll().remove();//niceScroll必須先移除否則第二次會跑位

        /*判斷瀏覽器做動作*/
        var explorer = window.navigator.userAgent;
        if (explorer.indexOf("MSIE") >= 0) {//ie10及以下


        }else if(explorer.indexOf("Edge") > -1){//Edge
            setTimeout(function(){//niceScroll必須延遲，否則會跑位
                $(".modal-body").niceScroll({
                    touchbehavior:true,  //是否是触摸式滚动效果
                    cursorcolor: "#ffda2e", // 改变滚动条颜色，使用16进制颜色值
                    cursorwidth: "10px", // 滚动条的宽度，单位：便素
                    cursorborder: "1px solid rgba(24,65,144,0.8)", // CSS方式定义滚动条边框
                    autohidemode: false,//滚动条是否是自动隐藏，默认值为 true
                    background: "rgba(24,65,144,0.8)", // 轨道的背景颜色
                    cursorborderradius: "5px", // 滚动条圆角（像素）
                    cursordragontouch: true, // 使用触屏模式来实现拖拽
                });
            }, 500);
        }else if (explorer.indexOf("Firefox") >= 0){//Firefox
            setTimeout(function(){//niceScroll必須延遲，否則會跑位
                $(".modal-body").niceScroll({
                    touchbehavior:true,  //是否是触摸式滚动效果
                    cursorcolor: "#ffda2e", // 改变滚动条颜色，使用16进制颜色值
                    cursorwidth: "10px", // 滚动条的宽度，单位：便素
                    cursorborder: "1px solid rgba(24,65,144,0.8)", // CSS方式定义滚动条边框
                    autohidemode: false,//滚动条是否是自动隐藏，默认值为 true
                    background: "rgba(24,65,144,0.8)", // 轨道的背景颜色
                    cursorborderradius: "5px", // 滚动条圆角（像素）
                    cursordragontouch: true, // 使用触屏模式来实现拖拽
                });
            }, 500);
        }else if (explorer.indexOf("Chrome") >= 0){//Chrome

        }else if (explorer.indexOf("Opera") >= 0){//Opera

        }else if (explorer.indexOf("Safari") >= 0){//Safari
            setTimeout(function(){//niceScroll必須延遲，否則會跑位
                $(".modal-body").niceScroll({
                    touchbehavior:true,  //是否是触摸式滚动效果
                    cursorcolor: "#ffda2e", // 改变滚动条颜色，使用16进制颜色值
                    cursorwidth: "10px", // 滚动条的宽度，单位：便素
                    cursorborder: "1px solid rgba(24,65,144,0.8)", // CSS方式定义滚动条边框
                    autohidemode: false,//滚动条是否是自动隐藏，默认值为 true
                    background: "rgba(24,65,144,0.8)", // 轨道的背景颜色
                    cursorborderradius: "5px", // 滚动条圆角（像素）
                    // cursordragontouch: true, // 使用触屏模式来实现拖拽
                });
            }, 500);
        }else if (explorer.indexOf("Trident/7.0") >= 0){//IE11
            // alert('ie11')
        }
    });

留言

張貼留言

這個網誌中的熱門文章

PHP讀資料庫的資料，保留換行及空格

PHP讀資料庫的資料，保留換行 參考網址: http://www.wibibi.com/info.php?tid=323 PHP nl2br 函式會在字串中的「行」之前加上  HTML 換行 標籤 <br> 讓瀏覽器正確顯示換行排版，而不是每一行都連在一起。通常用於當輸入端在網頁的文字輸入欄位  textarea  輸入含有換行文字段落，存入資料庫後，代表換行的符號如「\n」也會存入資料庫中，但是當 PHP 從資料庫中將資料讀取出來，顯示於網頁時，並不會自動換行，這時候就必須用 nl2br 函式將字串的「\n」先轉換為  HTML 換行 標籤。 PHP nl2br 基本語法 nl2br( $string ) 語法小括號中的字串 $string 為必填項目，就是要轉換的字串，nl2br 可以判斷的換行符號如  \r\n 、 \n\r 、 \n  與  \r ，遇到字串中有這些符號的時候，nl2br 便會將其轉換為 <br>、<br/> 或 </br> 標籤，並返回轉換結果。 PHP nl2br 範例 <?php $new_string = "Welcome to Wibibi.\nIt was a very nice day."; echo  nl2br ($new_string); ?> 以上輸出網頁結果 Welcome to Wibibi. It was a very nice day. 檢視程式碼 Welcome to Wibibi. <br /> It was a very nice day. -------------------------------------------------------------------------------------------------------------------------- PHP讀資料庫的資料，保留空格 參考網址: https://codeday.me/bug/20180309/141593.html 使用<pre></pre>標籤包住內容即可。
閱讀完整內容

CSS animation 簡寫&好用的工具

▼css animation 簡寫: animation: saleChange 2s 1s infinite; -webkit-animation: saleChange 2s 1s infinite; ▼CSS animation 好用的工具教學: 一些好用工具的教學可參考以下影片( Big Boy Can Code ) https://www.youtube.com/watch?v=Y4xBYZJSvuM&t=13s ▼CSS animation 好用的工具: animate.css: https://daneden.github.io/animate.css/ animista: https://animista.net/ keyframes.app: https://keyframes.app/
閱讀完整內容

使陣列裡的數值隨機重新排序

.▼放置全域 var new_arr = [];//定義一個新陣列，作為產生亂數時存放用 . . . . . ▼function內 var arr = [1,2,3,4,1,2,3,4,1,2,3,4];       arr.sort(randomSort);        new_arr.push(arr);//塞入陣列裡 . . . . .▼取得隨機號碼給sort()重新排列 function randomSort(a, b) { return Math.random() > 0.5 ? -1 : 1; } . . . . .▼清空陣列 new_arr.length = 0;
閱讀完整內容