Форум

cyberblade · #11 (**permalink**) 10.11.2012, 09:50

Ладно попробую пойти от обратного... Блокирую скролл при наведении на див.

$(function() {
	$(".chat").mouseenter(function() {
		document.onmousewheel = function (e) {
		  e.preventDefault();
		}
	}).mouseleave(function() {
		document.onmousewheel = null;
	})
})

Теперь надо придумать как прокручивать див колесом ))))

cyberblade · #12 (**permalink**) 10.11.2012, 12:08

Финишная прямая... Помогите кто чем может...

Частично решить задачу удалось, но теперь другой вопрос, скорлирование DIVа...
Вот код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		
		<script src="http://yandex.st/jquery/1.8.2/jquery.js" type="text/javascript"></script>
		<script src="http://yandex.st/jquery/mousewheel/3.0.6/jquery.mousewheel.js" type="text/javascript"></script>
		
		<script language="javascript"><!--
			$(function() {
			
				/* запрещаем стандартное действие скрола при наведении */
				$(".chat").mouseenter(function() {
					document.onmousewheel = function (e) {
					e.preventDefault();
				}
				
				/* перемещаем текст внутри дива */
				$('#chat').mousewheel(function(event, delta) {
					if (delta > 0) { 
						/* перемещение вверх */
						$("#chatext").scrollTop(-10);
					} else {
						/* перемещение вниз */
						$("#chatext").scrollTop(+10);
					}  
				});
				
				/* отменяем запрет скрола */
				}).mouseleave(function() {
					document.onmousewheel = null;
				})
			});
		//--></script>
		
		<style>
			.chat { position:absolute; display:block; width:200px; height:100px; background:#AAA; overflow:hidden; }
		</style>
		
	</head>
	
	<body>
		<div style="width:100%; height:2000px">
		
			<div class="chat" id="chat">
				<div id="chatext" style="overflow:auto;width:220px;height:120px">
					Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст.
					Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст.
					Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст.
					Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст.
				</div>
			</div>
			
		</div>
		
</body></html>

Вот пример: http://cybermanager.pro/test2.html

Теперь проблема заключается в том, что не получается полностью скролировать див

Подскажите, где я накосячил?

cyberblade · #13 (**permalink**) 10.11.2012, 14:21

Ура!!! Получилось ))) Всем спасибо!

Вот мое решение, может пригодиться кому-то:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script src="http://yandex.st/jquery/1.8.2/jquery.js" type="text/javascript"></script>
		<!-- подключем плагин колеса (около 2кб) //-->
		<script src="http://yandex.st/jquery/mousewheel/3.0.6/jquery.mousewheel.js" type="text/javascript"></script>
		<script language="javascript"><!--
			$(function() {
				/* запрещаем стандартное действие скрола при наведении */
				$(".chat").mouseenter(function() {
					document.onmousewheel = function (e) {
						e.preventDefault();
					}
				/* перемещаем текст внутри дива */
				$('#chat').mousewheel(function(event, delta) {
					if (delta > 0) {
						/* перемещение вверх */
						chatext.scrollTop-=10;
					} else {
						/* перемещение вниз */
						chatext.scrollTop+=10;
					}  
				});
				/* отменяем запрет скрола */
				}).mouseleave(function() {
					document.onmousewheel = null;
				})
			});
		//--></script>
		<style>
			/* задаем стиль диву */
			.chat {position:absolute; display:block; width:375px; background:#888; color:#EEE; overflow:hidden; font-family:Tahoma,sans-serif; font-size:12px; border:3px solid #444; border-radius:6px; padding:10px}
		</style>
	</head>
	<body>
		<div style="width:100%; height:2000px">
			<div class="chat" id="chat">
				<!-- контейнер //--><span style="font-size:20px;margin:5px">Покрути над дивом колесом!</span>
				<div id="chatext" style="overflow:auto;width:375px;height:150px;margin:5px">
					Текст для прокрутки
					Текст для прокрутки
					Текст для прокрутки
				</div>
			</div>
		</div>
</body></html>

Рабочий пример тут: http://cybermanager.pro/result.html

Если у кого-нить есть вариант лучше и проще - буду признателен.

sonik_74 · #14 (**permalink**) 10.01.2013, 14:34

не знаю как у вас получилось, у меня в мозиле скроллы работают на body

мой вариант без jquery

<script>
 
   function wheel(event)
   {
	var delta=0
 
	if(!event)		event = window.event
	if(event.wheelDelta)	delta = event.wheelDelta/120
	else if(event.detail)	delta = -event.detail/3
 
	if(delta && typeof handle == 'function')
	{
		handle(delta)
		if(event.preventDefault) event.preventDefault()
		event.returnValue = false
	}
   }
 
   function over_div(elem)
   {
	handle = function(delta)
	{
		if(delta > 0)	elem.scrollTop -= 30;
		else		elem.scrollTop += 30;
	}
   }
 
   function out_div(elem)
   {
	handle = null
   }
 
   if(window.addEventListener)
	window.addEventListener('DOMMouseScroll', wheel, false);
	window.onmousewheel = document.onmousewheel = wheel;
 
</script>
 
<style>
 
   .div_id
   {
    width:300px;
    height:300px;
    overflow-y:scroll;
    border:1px solid #aaa;
    margin-top:550px;
    margin-left:150px
   }
 
</style>
 
<body>
 
   <img style="height:4000px;position:absolute;z-index:-5;visibility:hidden;">
 
   <div class="div_id" onMouseOver="over_div(this)" onMouseOut="out_div(this)">
 
	<script> for(i=0; i<100; i++) document.write("Текст <br>\n") </script>
 
   </div>
 
</body>

Форум

Справочник

Discord чат

Курсы javascript