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的哪哪都可以,开心就好!!
美中不足的是没办法点击卷轴轨道做移动,这个部份我还没有想出来能怎麽写
如果有研究成功再补充吧~!!


<<:  Day 05 - IoC 容器与Servlet 容器

>>:  [DAY5] 病识感──当我们关注到测试

Vue.js 从零开始:This 是什麽?

学习JavaScript也有一阵子,当有人问起This是什麽,都无法解释的很清楚,代表理解的不够彻底...

Docker:KVM管理介面(virt-manager)

快照原里 对於熟悉软件Hyperviser的读者来讲,相信快照(Snapshot)一定是常会使用到的...

预编译 - 变数和function的被建立、初始化/预编译、执行的全纪录

你以为JS拿来就乖乖照着我们打的一行一行跑吗?太天真了,我说我~~ 变数怎麽存,存哪里,在哪里叫得到...

DeBug Day 26

修正Bug日 [ ] 修正首页的排版问题 [ ] 修正书本细节页面的排版问题 [ ] 修正新增照片到...

热门AI平台分享 | Dataiku 让跨专业的数据协作成为可能

大数据落地的三部曲是:意愿、能力、工具 当今很多企业其实并不缺乏用数据辅助决策的意愿 缺的反而是「营...