DHTML Scrollbar无法在FF中运行 [英] DHTML Scrollbar not working in FF
问题描述
我昨天在某个地方找到了一个垂直滚动条的代码，我将其修改为水平滚动条。它似乎适用于IE 7和Netscape 7，但它不适用于我有1.5和2.0的FF。它没有得到正确的docW，这是完整的文档大小。任何建议都非常受欢迎。谢谢。
< style type =" text / css">
#container {
位置：绝对;
顶部：10px;
左：10px;
宽度：100％;
身高：120px;
溢出：隐藏;
}
#content {
职位：亲戚;
}
p {
字体：正常10px / 14px arial，helevetica，san-serif;
}
#scrollArea {
职位：绝对;
剩余：0px;
top：130px;
身高：10px;
宽度：100％;
border：1px solid＃666;
溢出：隐藏;
}
#scroller {
职位：绝对;
top：-1px;
宽度：10px;
身高：10px;
背景：#AAA;
border-top：1px solid＃666;
border-bottom：1px solid＃666;
}
< / style>
< script type =" text / javascript" src =" dom-drag.js">< / script>
< / head>
< body bgcolor ="＃ 464646" LEFTMARGIN = QUOT; 0" TOPMARGIN = QUOT; 0" MARGINWIDTH =" 0" marginheight =" 0">
< script type =" text / javascript">
//我们全部包装对象中的代码，以便它不会干扰任何其他代码
var scroller = {
init：function（）{
//收集变量
scroller.docW = document.getElementById（" content"）。offsetWidth;
scroller.contW = document.getElementById（ " container"）。offsetWidth;
scroller.scrollAreaW = document.getElementById（" scrollArea"）。offsetWidth;
// alert（滚动条。 docW +"" + scroller.contW +"" + scroller.scrollAreaW）;
//计算滚动条的宽度并调整滚动条div的大小
//（但是，我们确保长页面不小）
scroller.scrollW =（scroller.contW * scroller.scrollAreaW）/ scroller.docW;
if（scroller.scrollW< 15）s croller.scrollW = 15;
document.getElementById（" scroller"）。style.width = Math.round（scroller.scrollW）+" px";
//一旦考虑到scoller'的宽度，有效滚动距离是多少
scroller.scrollDist = Math.round（scroller.scrollAreaW-scroller.scrollW）;
//使滚动条div可拖动
Drag.init（document.getElementById（" scroller"），null，-1，scroller.scrollDist，0 ，0）;
//添加ondrag函数
document.getElementById（" scroller"）。onDrag = function（x，y）{
var scrollX = parseInt（document.getElementById（" scroller"）。style .left）;
var docX = 0 - （scrollX *（scroller.docW - scroller.contW ）/ scroller.scrollDist）;
document.getElementById（" content"）。style.left = docX +" px";
}
}
}
onload = scroller.init;
< / script>
< div id =" container">
< div id =" content">
<？= $ thumbText？>
< / div>
< / div>
< div id =" scrollArea">
< div id =" scroller">< / div>
< / div>
thumbText？>
< / div>
< / div>
< div id =" scrollArea">
< div id =" scroller">< / div>
< / div>
我不是一个javscript的家伙并且看起来不太难但是尝试将html和body设置为100％宽度css，看看是否能解决它。
html，body {
宽度：100％
}
我没有看到任何变化。遗憾。
I found code close to this somewhere yesterday for a vertical scrollbar and I modified it for a horizontal scroll bar. It seems to work in IE 7 and Netscape 7, but it isn''t working for the FF I have 1.5 and 2.0. It is not getting the correct docW which is the full document size. Any suggestions are more than welcome. Thanks.
<style type="text/css">
#container {
position : absolute;
top : 10px;
left : 10px;
width : 100%;
height : 120px;
overflow : hidden;
}
#content {
position : relative;
}
p {
font : normal 10px/14px arial,helevetica,san-serif;
}
#scrollArea {
position : absolute;
left : 0px;
top : 130px;
height : 10px;
width : 100%;
border : 1px solid #666;
overflow : hidden;
}
#scroller {
position : absolute;
top : -1px;
width : 10px;
height : 10px;
background : #AAA;
border-top : 1px solid #666;
border-bottom : 1px solid #666;
}
</style>
<script type="text/javascript" src="dom-drag.js"></script>
</head>
<body bgcolor="#464646" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script type="text/javascript">
//We wrap all the code in an object so that it doesn''t interfere with any other code
var scroller = {
init: function() {
//collect the variables
scroller.docW = document.getElementById("content").offsetWidth;
scroller.contW = document.getElementById("container").offsetWidth;
scroller.scrollAreaW = document.getElementById("scrollArea").offsetWidth;
//alert(scroller.docW+" "+scroller.contW+" "+scroller.scrollAreaW);
//calculate Width of scroller and resize the scroller div
//(however, we make sure that it isn''t to small for long pages)
scroller.scrollW = (scroller.contW * scroller.scrollAreaW) / scroller.docW;
if(scroller.scrollW < 15) scroller.scrollW = 15;
document.getElementById("scroller").style.width = Math.round(scroller.scrollW) + "px";
//what is the effective scroll distance once the scoller''s Width has been taken into account
scroller.scrollDist = Math.round(scroller.scrollAreaW-scroller.scrollW);
//make the scroller div draggable
Drag.init(document.getElementById("scroller"),null ,-1,scroller.scrollDist,0,0);
//add ondrag function
document.getElementById("scroller").onDrag = function (x,y) {
var scrollX = parseInt(document.getElementById("scroller").style .left);
var docX = 0 - (scrollX * (scroller.docW - scroller.contW) / scroller.scrollDist);
document.getElementById("content").style.left = docX + "px";
}
}
}
onload = scroller.init;
</script>
<div id="container">
<div id="content">
<?= $thumbText ?>
</div>
</div>
<div id="scrollArea">
<div id="scroller"></div>
</div>
thumbText ?>
</div>
</div>
<div id="scrollArea">
<div id="scroller"></div>
</div>
I''m not a javscript guy and didn''t look too hard but try and set html and body to 100% width in the css and see if that solves it.
html,body{
width:100%
}
I did not see any change. Sorry.
这篇关于DHTML Scrollbar无法在FF中运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
