Прокрутка содержимого блока

Suppy · April 22, 2009

Здравствуйте! На сайте есть некоторый блок фиксированной высоту при переполнении которого должны появляться сверху и снизу кнопки прокрутки(хочется заменить не оч эстетичное overflow). Подскажите пожалуйста плагин к jquery если такой есть или другое готовое решение. Или на худой конец скажите пожалуйста куда копать.

Nekromancer · April 22, 2009

jScrollPane - токо вертикальное меня..

в принципе на jQuery скролинг раз плюнуть сделать, просто надо захотеть :lol:

Edited April 22, 2009 by Nekromancer

Searcher · April 23, 2009

http://www.dyn-web.com/code/scroll/vert.php

Nekromancer · April 23, 2009

тоже токо вертикальный..

вот тут вариант.. но он по мойму того не стоит

http://www.hesido.com/web.php?page=customscrollbar

Searcher · April 23, 2009

А прочитать первый абзац по ссылке не пытались?! Что за невнимательность? Вот вам горизонтальный с того же сайта: http://www.dyn-web.com/code/scroll/horiz.php

Nekromancer · April 23, 2009

а две сразу? :lol:

Searcher · April 23, 2009

ну это уже надо мозги включать... лень что-то :lol:

Nekromancer · April 23, 2009

Suppy · April 23, 2009

Спасибо всем за ответы. Мне тут подкинули еще решение http://sorgalla.com/projects/jcarousel/ Выглядит так, как я и хотел, но вот размер.. :lol:

Suppy · April 25, 2009

В итоге написал свое решение, задача немного конкретизировалась и это по большей части для фотогалереи. Все блоки элементов(фотографий например) имеют фиксированную величину, которая указывается в скрипте. Это необходимо знать, чтобы вовремя убирать кнопки прокрутки. Дольше всего пришлось помучиться с кроссбраузерностью, но терь все работает. Вот, может кому пригодится..

<!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>

Nekromancer · April 26, 2009

а нафига парсить библиотеку с гугла?

Suppy · April 26, 2009

В данном конкретном случае для самодостаточности примера- скопировал и оценил (поддерживал бы форум вложения, выложил бы с кнопочками). А вообще это удобно. Если пользователь посещал любой сайт, грузящий библиотеку с Google Code ( тот же gmail), то она уже будет в кэше и соответственно загрузится мгновенно. Но с оправданностью такого решения можно конечно и поспорить.

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>

Интересное решение. А как сюда добавить, что бы скрол работал когда на мышке колесиком скролишь?

Vlad · March 4, 2011

Вы на год постов посмотрите. Хотите получить ответ, создайте новую тему.

Sign In

Прокрутка содержимого блока

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information