После скролла списка не срабатывает функция my() (которая убирает его).
Если им не пользоваться все ок.
<!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>Untitled Document</title>
<script>
z=250;
b=0;
a=0;
function my2()
{
if(z==115) {return};
a=setTimeout('my2()',10);
z -= 1;
document.getElementById("div1").style.top = z + 'px';
}
function my3()
{
if(z==250) {return};
d=setTimeout('my3()',10);
z += 1;
document.getElementById("div1").style.top = z + 'px';
}
function my()
{
if (a == 0){
if(b == -164) {a=1; document.getElementById("bt").innerHTML = "→"; return;}
setTimeout('my()',10);
b -= 4;
document.getElementById("div1").style.left = b + 'px';}
else if (a == 1){
if (b == 0) {a=0; document.getElementById("bt").innerHTML = "←"; return;}
setTimeout('my()',10);
b += 4;
document.getElementById("div1").style.left = b + 'px';}
}
</script>
<style>
body {
margin:0;
background-color:#333;
}
#div1 {
width: 164px;
position: fixed;
z-index: 1;
}
.div11 {
width: 164px;
position: fixed;
height:136px;
top: 30%;
z-index: 0;
}
.div111 {
width: 164px;
height:136px;
position: fixed;
top: 30%;
z-index: 1;
clip: rect(0 164px 136px 0);
}
#div1 > a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px;
background:#212121;
border: 2px ridge #000;
}
#div1 > a:hover {background: #7f7f7f;}
.div3 {
position:absolute;
top:0;
left:50%;
margin-left:-41px;
margin-top:-26px;
}
.div3 a {
text-decoration: none;
color: #ffffff;
border: 2px ridge #000;
background:#212121;
padding: 5px 30px;
}
.div3 a:hover {background: #7f7f7f;}
.div4 {
position:absolute;
left:50%;
top:100%;
margin-left:-41px;
margin-top:7px;
}
.div4 a {
text-decoration: none;
color: #ffffff;
border: 2px ridge #000;
background:#212121;
padding: 5px 30px;
}
.div4 a:hover {background: #7f7f7f;}
#slide {
position:absolute;
right:-30px;
top:50%;
margin-top:-18px;
}
#slide > a {
text-decoration: none;
color: #ffffff;
border: 2px ridge #000;
background:#212121;
padding: 30px 5px;
line-height:36px;
}
#slide > a:hover {background: #7f7f7f;}
</style>
</head>
<body>
<div class="div111">
<div id="div1">
<a href="#" >111</a>
<a href="#" >222</a>
<a href="#" >333</a>
<a href="#" >444</a>
<a href="#" >555</a>
<a href="#" >666</a>
<a href="#" >777</a>
<a href="#" >888</a>
</div>
</div>
<div class="div11">
<div class="div3" onmouseover="my2();" onmouseout='clearTimeout(a);';><a href="#nul">↑</a></div>
<div class="div4" onmouseover="my3();" onmouseout='clearTimeout(d);';><a href="#nul">↓</a></div>
<div id="slide" onclick="my()"><a id='bt' href="#nul">←</a></div>
</div>
<div id='tt'></div>
</body>
</html>