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

首先我們先試著把捲軸挪到中間

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

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

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

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

如果拉桿完全不能拉的話，那它就變成一個純粹的裝飾品了
所以我們要自己幫拉桿加入「拖曳拉動」的功能
這邊要使用一個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滿多文章介紹的

加上之後我們就可以拉動我們的捲軸了

但是內文並沒有跟著捲動，所以我們要自己寫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中可以根據需要自己寫要做什麼

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