受夠一成不變的滾軸了嗎?讓NiceScroll帶你美化你的滾軸!

0
52

不知道大家有沒有遇過客戶覺得滾軸太單調,想調整的問題,
或者是想要滾動時,網頁可以呈現帶有平滑的效果。

我們知道客戶問題總是特別多 .. 但提出來我們也只能滿足他。

那到底該怎麼做呢?

今天franbite跟大家分享一個簡單快速,又立馬可以美化你右手邊一成不變的滾軸。

 

簡要介紹:
NiceScroll是一款簡單實用的螢幕滾軸優化效果,基於jquery。
他可以改變滾軸顏色,並把滾動改為更高質感的平滑效果,
操作起來非常容易,讓我們往下來看看!

DEMO:http://areaaperta.com/nicescroll/demo.html

 

download  檔案下載

首先第一步,我們一樣先下載套件先,裡面會看到第一個是beta版,我們別理他,
我們點選第二個,並把它下載下來。

https://code.google.com/archive/p/jquery-nicescroll/downloads

 

 

search  使用方法

在頁面中引入jQuery . jquery.nicescroll.min.js 文件。

<script src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="jquery.nicescroll.js"></script>

 

computer   HTML代碼

此div是用來等下做單個區塊的滾軸美化效果 。
若你是要整個網頁的效果 , 此行可以不加 , 等下初始化JS就可以了。

<div class="thisdiv"></div>

 

settings  啟動JS

此代碼是執行整個網頁滾軸美化效果

$(document).ready(
  function() { 
	  $("html").niceScroll();
  }
);

若你只要美化單個區塊,則改用下面的JS,
但記得html要有含命名的div區塊,才有效果,
class的命名可以隨意,但記得和JS初始化的一致。

$(document).ready(
  function() { 
	  $(".thisdiv").niceScroll({cursorcolor:"#00F"});
  }
);

 

 

如此一來便能實現NiceScroll滾軸美化效果囉!夠簡單吧?
是不是又學一招了呢?
趕快去試看看吧^^~

frankbite-關注UI設計/前端/網頁,如果你喜歡我們的文章,歡迎 Follow 我們的 Facebook 專頁,我們將不吝嗇的為你提供最新、最實用的資訊!

%e6%9c%aa%e5%91%bd%e5%90%8d-1_03

本文章所屬frankbite,未經授權,不得轉載!如需轉載,煩請通知。