网页如何控制横向滚动条
发布网友
发布时间：2022-04-20 06:49
共1个回答
热心网友
时间：2022-05-13 01:48
一下是我在网上找到的
并非原创 但是是可用的
支持Opera,Safari等浏览器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:185px;
top:81px;
width:5px;
height:175px;
background-color: #99FFFF;
overflow:auto;
}
#apDiv2{
width:2000px;
position:relative;
}
-->
</style>
</head>
<body>
<div id="apDiv1">
<div id="apDiv2">asdads</div>
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
var Browser = function(){
var d_ = document,n_ = navigator,t_ = this,s_= screen;
var b = n_.appName;
var ua = n_.userAgent.toLowerCase();
t_.name = "Unknow";
t_.safari = ua.indexOf("safari")>-1; // always check for safari & opera
t_.opera = ua.indexOf("opera")>-1; // before ns or ie
t_.firefox = !t_.safari && ua.indexOf('firefox')>-1; // check for gecko engine
t_.ns = !t_.firefox && !t_.opera && !t_.safari && (b=="Netscape");
t_.ie = !t_.opera && (b=="Microsoft Internet Explorer");
t_.name = (t_.ie ? "IE" : (t_.firefox ? "Firefox" : (t_.ns ? "Netscape" : (t_.opera ? "Opera" : (t_.safari ? "Safari" : "Unknow")))));
}
var brw = new Browser();
var apDiv1 = document.getElementById("apDiv1");
var perWidth = apDiv1.clientWidth / 2;
var mouse_wheel = function(e){
var evt = window.event || e;
if(evt.detail > 0 || evt.wheelDelta < 0)
apDiv1.scrollLeft += perWidth;
else
apDiv1.scrollLeft -= perWidth;
}
var mouse_wheel_opera = function(e){
//alert(window.event == e); //Opera 下，window.event 和 e 相等
var obj = e.srcElement;
if(obj == apDiv1){
mouse_wheel(e);
}
}
switch(brw.name){
case "IE":
case "Safari":
apDiv1.onmousewheel = mouse_wheel;
break;
case "Firefox":
apDiv1.addEventListener("DOMMouseScroll", mouse_wheel, false);
break;
case "Opera":
document.onmousewheel = mouse_wheel_opera;
break;
}
</script>
