今天要介绍的是「如果我就想把卷轴放在不是最右边的位置怎麽办?」
这是自制网站卷轴的最後一篇啦~
我知道一般我们在设计网站时,会根据网站设计原则去做排版
但有时候人就是皮皮的,会想试着做一些不一样的东西!!
所以今天来说说,如果我想把卷轴想放在其他地方时,还需要在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的哪哪都可以,开心就好!!
美中不足的是没办法点击卷轴轨道做移动,这个部份我还没有想出来能怎麽写
如果有研究成功再补充吧~!!
<<: Day 05 - IoC 容器与Servlet 容器
学习JavaScript也有一阵子,当有人问起This是什麽,都无法解释的很清楚,代表理解的不够彻底...
快照原里 对於熟悉软件Hyperviser的读者来讲,相信快照(Snapshot)一定是常会使用到的...
你以为JS拿来就乖乖照着我们打的一行一行跑吗?太天真了,我说我~~ 变数怎麽存,存哪里,在哪里叫得到...
修正Bug日 [ ] 修正首页的排版问题 [ ] 修正书本细节页面的排版问题 [ ] 修正新增照片到...
大数据落地的三部曲是:意愿、能力、工具 当今很多企业其实并不缺乏用数据辅助决策的意愿 缺的反而是「营...