iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

30天每天寫網站系列 第 5

Day5-自製網站捲軸(下)_我就特立獨行

今天要介紹的是「如果我就想把捲軸放在不是最右邊的位置怎麼辦?」
這是自製網站捲軸的最後一篇啦~
我知道一般我們在設計網站時,會根據網站設計原則去做排版
但有時候人就是皮皮的,會想試著做一些不一樣的東西!!
所以今天來說說,如果我想把捲軸想放在其他地方時,還需要在JS寫些什麼呢~?

首先我們先試著把捲軸挪到中間
https://i.imgur.com/kTTwHMw.gif
我們會發現,我們製作的拉桿無法點擊拉動並讓內文捲動
反倒是最右邊有個隱形的拉桿可以去拉動
這是因為昨天的文章中,我們把預設捲軸的寬度縮小並「隱藏」,但是它實際上還是存在只是我們看不到
所以昨天那篇自製捲軸的拉動行為,其實是在拉動隱形的預設捲軸,並不是拉動我們製作的捲軸

預設捲軸在最右邊這是我們無法改變的事情,所以為了避免在點擊「空處」時無意識拉到捲軸,我們需要先將捲軸徹底變不見

.text_box::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

把捲軸的寬度設置成0之後,預設捲軸就不只是被隱藏,而是徹底從畫面中消失了
這樣設定之後,我們就無法對拉桿實施任何拉動的行為,只剩下滑鼠中鍵的滾動
https://i.imgur.com/DUIGUj5.gif

如果拉桿完全不能拉的話,那它就變成一個純粹的裝飾品了
所以我們要自己幫拉桿加入「拖曳拉動」的功能
這邊要使用一個jQuery系列插件jQuery-ui中的.draggable()這個方法來寫

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

因為我們要拉動的是捲軸中的拉桿,所以我們給scroll-bar設一個id="draggable"
然後在JS中加入這段

$("#draggable").draggable({
    axis: "y", containment: "parent"
});

axis是限制可以移動的方向,containment是限制移動範圍
詳細或其他功能可以自行google滿多文章介紹的

加上之後我們就可以拉動我們的捲軸了
https://i.imgur.com/dAYb4PK.gif
但是內文並沒有跟著捲動,所以我們要自己寫function
整體換算的概念跟昨天是差不多的
按照比例把自製拉桿距離最上面的top值換算給內文使用,便可以做出拉動捲軸內文捲動的效果了
完整程式碼長這樣

$("#draggable").draggable({
    axis: "y", containment: "parent", 
    drag: function () {
        var bartop = document.getElementById("draggable").offsetTop; //移動多少
        var scale_ = $('.text_box').height() / $('#text_content').height() //滾輪長度占整體比例
        var scroll_float = 0;
        scroll_float = bartop / scale_; //移動距離換算成滾動長度
        $(".text_box").scrollTop(scroll_float);
    }
});

drag是拉動時可以幹嘛,在function中可以根據需要自己寫要做什麼

https://i.imgur.com/7MFoZ1f.gif
這樣子就完成啦!!
加上這段程式碼後,想把捲軸放在text_box的哪哪都可以,開心就好!!
美中不足的是沒辦法點擊捲軸軌道做移動,這個部份我還沒有想出來能怎麼寫
如果有研究成功再補充吧~!!


上一篇
Day4-自製網站捲軸(中)_想要更多造型
下一篇
Day6-網站閱讀進度條(上)_到底哪裡少算了
系列文
30天每天寫網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言