Помогите в доработке кода скролинга

Feaire · March 4, 2011

Народ привет. Есть вот такой кодик, все устравиает но вот только как сделать так что бы скрол работал еще кога мышкой скролишь?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.up-but {
cursor: pointer;
height: 20px;
width: 47px;
visibility: hidden;
background: url('up-but.gif') no-repeat;
margin-left: 67px;
}

.down-but {
cursor: pointer;
height: 20px;
visibility: hidden;
width: 47px;
background: url('down-but.gif') no-repeat;
margin-left: 67px;
}

.gallery {
width: 185px; height: 320px;
border: 2px solid black;
overflow: hidden;
position: relative;
}

.scroll {
position: relative;
top: 0;
}

</style>
<script type="text/javascript">
$(document).ready(function(){		  
	 var item_height=105;
	 var scroll_speed=600;
		 var item_num=0;	
	 var cont_height=parseFloat($(".gallery").css("height"));		 
	 $(".gallery .scroll div").each(function() {item_num++;});	 
	 all_item_height=item_height*item_num;	 
	 var dif=all_item_height-cont_height;	
	 if (dif > 0) $(".down-but").css("visibility", "visible");
	$(".down-but").click(function(){		
		$(".scroll").animate({top: "-="+item_height}, scroll_speed);		
		$(".up-but").css("visibility", "visible");		 
		dif=dif-item_height;			  
		if (dif<0) $(".down-but").css("visibility", "hidden");		
		return false;
	});
	$(".up-but").click(function(){	
		$(".down-but").css("visibility", "visible");
		$(".scroll").animate({top: "+="+item_height}, scroll_speed);	
		dif=dif+item_height;	
		if (dif+1 > all_item_height-cont_height) $(".up-but").css("visibility", "hidden");									  
		return false;
	});

});
</script>
</head>
<body>
<div class="up-but">Вверх</div>
<div class="gallery">
<div class="scroll">
<div style="margin-top: 5px; background: #ededed; height: 100px; width: 180px">Блок1</div>
<div style="margin-top: 5px; background: #ededed; height: 100px; width: 180px">Блок2</div>
<div style="margin-top: 5px; background: #ededed; height: 100px; width: 180px">Блок3</div>
<div style="margin-top: 5px; background: #ededed; height: 100px; width: 180px">Блок4</div>
<div style="margin-top: 5px; background: #ededed; height: 100px; width: 180px">Блок5</div>
<div style="margin-top: 5px; background: #ededed; height: 100px; width: 180px">Блок6</div>
<div style="margin-top: 5px; background: #ededed; height: 100px; width: 180px">Блок7</div>
</div>
</div>
<div class="down-but">Вниз</div>
</body>
</html>

fan · March 5, 2011

скорми гуглу строчку

скроллинг колёсиком мыши кнопками

или как то похоже

psywalker · March 5, 2011

ТС, не понял вопроса. Где именно скроллинг должен работать, в каком то блоке или на странице в целом? Пока скриншот.

Sign In

Помогите в доработке кода скролинга

Question

Feaire

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

fan

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information