вообщем мне нужно сделать так, чтобы блок Div начинал сколлиться, если указатель мыши приближается к его левой или правой границе ближе чем на 50 пикселов. Я нашел такое решение:
<html>
<head>
<title>Div Scrolling</title>
<style type="text/css">
#mydiv{
width: 200px;
background-color: red;
overflow-x: hidden;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var timer;
function leftScroll(){
document.getElementById("mydiv").scrollLeft -= 1;
}
function rightScroll(){
document.getElementById("mydiv").scrollLeft += 1;
}
function horizontalScroll(evt){
clearInterval(timer);
var pos = $("#mydiv").position();
if(evt.pageX < pos['left'] + 50){
timer = setInterval(leftScroll, 10);
}
if(evt.pageX > pos['left'] + $("#mydiv").width() - 50){
timer = setInterval(rightScroll, 10);
}
}
$(document).ready(function(){
$("#mydiv").bind("mouseover", function(){
$("#mydiv").bind("mousemove", horizontalScroll);
});
$("#mydiv").bind("mouseout", function(){
clearInterval(timer);
$("#mydiv").unbind("mousemove", horizontalScroll);
});
});
</script>
</head>
<body>
<div id="mydiv">
aaaaaaaaaaaaaaaaaaaafffffffffffffffffffffffffffffffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaffffffffffffffffffffffffffffffff
</body>
</html>
Но оно очень сильно тормозит. setInterval выставлен на 10 милисикунд, а он тормозит. Помогите исправить тормоза.