html自定義的DIV垂直滾動條
阿新 • • 發佈：2018-12-29
首先說一下自定義滾動條的一個要求：滑鼠滾動在它div上滾動時，如果沒有滾到頂端或底部則不能影響頁面滾動條和系統自帶一樣
讓一個div擁有滾動條
1、只有垂直滾動條
#mydiv1
{
position: relative;
overflow-x: hidden;
overflow-y: scroll;
width: 100px;
height: 100px;
}
2、只有水平滾動條
#mydiv2
{
position: relative;
overflow-x: scroll;
overflow-y: hidden;
width: 100px;
height: 100px;
}
3、有垂直和水平滾動條
#mydiv3
{
position: relative;
overflow: scroll;
width: 100px;
height: 100px;
}
在自定義滾動條時我們可以隱藏原來的滾動條，但我們不宜使用下面這種方式：
#mydiv3
{
position: relative;
overflow-y: hidden;
width: 100px;
overflow-wrap: break-word;
height: 100px;
}
如果使用這種方式不好實現用滑鼠滾動div時而不滾動頁面，且需要靠js程式碼控制滾動。
我認為好的方案是：
保留它原來的滾動條，然後用其它div遮蓋或剪裁掉它的滾動條，這種方式可以使用系統自帶的滑鼠滾輪滾動div內容，而且不會再滾動div內容時滾動整個頁面。
比如我們要自定義div的垂直滾動條可以用以下方式隱藏原來的
方式1（不太理想的方式）
<html><style><html> 這種方式有以下缺點： 1、我們需要獲取瀏覽器滾動條寬度才好準確的只隱藏div2的滾動條，我們這裡設定div2的寬度比它外部div1的寬度多20px,通過div1來剪裁了它超出100px的部分，這隻適用於滾動條寬度為20px的情況。 2、div2內容寬度小於div2在樣式裡設定的寬度。
#div1{
width: 100px;
height: 100px;
overflow: hidden;
} #div2{
width: 120px;
height: 100px;
overflow-wrap: break-word;
overflow-y:scroll;
}
</style> <div id="div1">
<div id="div2">
要滾動的內容
</div>
</div>
方式2：（個人覺得好的方式）
1、用一個div(div1)包住有內容的div(div2)，使用div1滾動div2（滾動條是div1的）,div1的寬度大於div2的寬度（div1的寬度 - div2的寬度 >= 瀏覽器滾動條寬度） 2、用另一個div包住地div1，寬度和div2的寬度一樣，用於把div1系統自帶滾動條隱藏,高度和div1一樣 這樣我們就實現了看不見滾動條卻可以滾動內容的div，後面實現自己的滾動條就行了 下面是我寫的一個例子，不過加了js來控制滾動，主要為了有手機滾屏那種緩慢停止的效果，用jswindow.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();防止選中內容 程式碼 <!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body> <style>
#div0
{
width: 160px;
position: relative;
background: rgba(5, 105, 245, 0.11);
border-radius: 2px;
margin-left: auto;
margin-right: auto;
}
#div1
{
width: 150px;
height: 100px;
overflow: hidden;
}
#div2
{
width: 150px;
height: 100px;
padding-right: 60px;
overflow-y: scroll;
}
#div3
{
width: 150px;
padding: 5px;
overflow-wrap: break-word;
} #scroll-bar
{
position: absolute;
top: 0;
right: 0;
width: 10px;
border-radius: 2px;
cursor: pointer;
background-color: rgba(190, 180, 190, 0.50);
}
#scroll-bar:hover
{
background-color: rgba(175, 175, 175, 0.70);
}
#scroll-btn
{
position: absolute;
right: 0;
width: 10px;
border-radius: 2px;
background-color: rgba(130, 158, 175, 0.71);
background:-webkit-gradient(linear, 0% 0%, 90% 0%,from(rgba(130, 158, 175, 0.91)), to(rgba(222, 235, 245, 0.91)));
opacity: 0.8;
cursor: pointer;
}
#scroll-btn:hover
{
opacity: 1;
}
</style> <!--
div0方便設定滾動條位置，因為滾動條使用結對佈局（position: absolute;）所以div0需使用相對佈局（position: relative;）
div1用於隱藏div2的滾動條;
div2帶垂直滾動條div,div3作為其內容被滾動
div3放內容，限制內容寬度,自動換行;
-->
<div id="div0">
<div id="div1">
<div id="div2">
<div id="div3">
要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容
要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容
要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容
要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容
要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容
</div>
</div>
</div>
<!--滾動條-->
<div id="scroll-bar">
<div id="scroll-btn"></div>
</div>
</div> <script>
function Scroll(panelId, scrollBarId, scrollBtnId, step){
var panel = document.getElementById(panelId);
var scrollBar = document.getElementById(scrollBarId);
var scrollBtn = document.getElementById(scrollBtnId);
var scrollBarDownY = 0, scrollTop = 0.0, lastScrollTop = 0, isSlither = false, distance = 0, a = 0.0;
var val1 = null;
var wnd = window, doc = document; //再此設定滾動條位置大小
scrollBar.style.height = panel.offsetHeight+"px"; function slither()
{
if(val1 == null){
val1 = setInterval(function(){
if(isSlither) {
isSlither = false;
distance = scrollTop - lastScrollTop;
a = distance / 30;
lastScrollTop = scrollTop;
} if(distance != 0)
{
scrollTop += distance / 3.0;
panel.scrollTop = scrollTop;
if(Math.abs(panel.scrollTop - scrollTop) > 0)
lastScrollTop = scrollTop = panel.scrollTop;
distance -= a;
if(Math.abs(distance) < Math.abs(a))
distance = a = 0;
}
else
{
clearInterval(val1);
val1 = null;
}
}, 30);
}
}
var setBar = function(){
var scan = panel.getBoundingClientRect().height / panel.scrollHeight;
if(scan >= 1) {
scrollBtn.style.display = "none"
}
else{
scrollBtn.style.display = "block"
scrollBtn.style.height = (scan * 100)+"%";
scrollBtn.style.top = (panel.scrollTop / panel.scrollHeight * 100)+"%";
}
}
setTimeout(function(){setBar();}, 1000); panel.onscroll = function(){
setBar();
} var mouseMove = function(e)
{
isSlither = true;
if(scrollBarDownY > 0)
lastScrollTop = scrollTop = panel.scrollTop = (e.pageY-scrollBar.getBoundingClientRect().top - scrollBarDownY) / panel.getBoundingClientRect().height * panel.scrollHeight;
wnd.getSelection ? wnd.getSelection().removeAllRanges() : doc.selection.empty(); //防止拖動時選中內容
} doc.onmouseup = function(){
scrollBarDownY = 0;
doc.onmousemove = null;
} scrollBtn.onmousedown = function(e) {
scrollBarDownY = e.pageY - scrollBtn.getBoundingClientRect().top;
doc.onmousemove = mouseMove;
distance = 0;
} scrollBar.onmousedown = function(e)
{
if(e.pageY < scrollBtn.getBoundingClientRect().top || e.pageY > scrollBtn.getBoundingClientRect().bottom) {
scrollBarDownY = 1;
distance = 0;
lastScrollTop = scrollTop = panel.scrollTop = (e.pageY - scrollBar.getBoundingClientRect().top) / panel.getBoundingClientRect().height * panel.scrollHeight;
}
} scrollBar.onmousewheel = panel.onmousewheel = function(e){
if (e.wheelDelta) { //判斷瀏覽器IE，谷歌滑輪事件
isSlither = true;
slither();
if (e.wheelDelta > 0) { //當滑輪向上滾動時
panel.scrollTop -= step;
scrollTop -= step;
}
if (e.wheelDelta < 0) { //當滑輪向下滾動時
panel.scrollTop += step;
scrollTop += step;
}
} else if (e.detail) { //Firefox滑輪事件
isSlither = true;
slither();
if (e.detail> 0) { //當滑輪向上滾動時
panel.scrollTop -= step;
scrollTop -= step;
}
if (e.detail< 0) { //當滑輪向下滾動時
panel.scrollTop += step;
scrollTop += step;
}
}
}
}
Scroll("div2", "scroll-bar", "scroll-btn", 5);
</script> <pre>
其它內容
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</pre>
</body>
</html>