Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.11.2012, 08:34
Интересующийся
Отправить личное сообщение для cyberblade Посмотреть профиль Найти все сообщения от cyberblade
 
Регистрация: 20.03.2012
Сообщений: 12

Запрет прокрутки при прокрутке 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://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
		<script language="javascript">
		$(function() {
			$("#mydiv").mouseenter(function() {
				$('body').css("overflow","hidden");
			}).mouseleave(function() {
				$('body').css("overflow","visible");
			})
		})
		</script>
	</head>
	<body>
		<div style="width:100%; height:2000px">
			<h2>С остановкой</h2>
			<span>Крутите колесико</span>
			<div style="width: 200px; height:100px; overflow: auto;" id="mydiv">
				Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст.
				Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст.
				Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст.
			</div>
			<h2>Без остановки</h2>
			<span>Крутите колесико</span>
			<div style="width: 200px; height:100px; overflow: auto;">
				Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст.
				Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст.
				Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст. Какой-нибудь заполняющий текст.
			</div>
		</div>
	</body>
</html>


Пример тут: http://cybermanager.pro/test.html

Работает так как нужно, НО! Пропадает основной скролл(оно и понятно) и вся страница смещается вправо на ширину скрола, "костыли" с отступами колдовать не хочется... Может быть подскажет кто-то красивое решение?

Помогите люди добрые )

Последний раз редактировалось cyberblade, 10.11.2012 в 04:37.
Ответить с цитированием
  #2 (permalink)  
Старый 09.11.2012, 09:16
Профессор
Отправить личное сообщение для Severtain Посмотреть профиль Найти все сообщения от Severtain
 
Регистрация: 25.04.2011
Сообщений: 277

Поищи методы статического фона для BODY.
<BODY background="Фоновое изображение" bgproperties=fixed>
Ответить с цитированием
  #3 (permalink)  
Старый 09.11.2012, 09:32
Интересующийся
Отправить личное сообщение для cyberblade Посмотреть профиль Найти все сообщения от cyberblade
 
Регистрация: 20.03.2012
Сообщений: 12

Не работает

Последний раз редактировалось cyberblade, 09.11.2012 в 09:50.
Ответить с цитированием
  #4 (permalink)  
Старый 09.11.2012, 21:59
Профессор
Отправить личное сообщение для Severtain Посмотреть профиль Найти все сообщения от Severtain
 
Регистрация: 25.04.2011
Сообщений: 277

Ну правильно!
Ваша проблема в том, что у вас дивы зафиксинные.! Разберемся пока с ними, а потом с фоном! Вообщем например так :
<div style="width: 200px; height:100px; position:absolute; top:0%; overflow: auto;" id="mydiv">
<div style="width: 200px; height:100px; position:absolute; top:5%; overflow: auto;">


<div style="width:100%; height:2000px"> // зачем это нужно ?!
Ответить с цитированием
  #5 (permalink)  
Старый 09.11.2012, 22:03
Профессор
Отправить личное сообщение для Severtain Посмотреть профиль Найти все сообщения от Severtain
 
Регистрация: 25.04.2011
Сообщений: 277

Стоп! Понял, что вам надо! Сейчас помогу!
Ответить с цитированием
  #6 (permalink)  
Старый 09.11.2012, 22:08
Профессор
Отправить личное сообщение для Severtain Посмотреть профиль Найти все сообщения от Severtain
 
Регистрация: 25.04.2011
Сообщений: 277

<div style="width: 200px; height:100px; position:fixed; top:0px; overflow: auto;" id="mydiv">
<div style="width: 200px; height:100px; position:fixed; top:50px; overflow: auto;">

вот пожалуйста )
А вообще это очень легко гуглится!
Ответить с цитированием
  #7 (permalink)  
Старый 09.11.2012, 22:51
Интересующийся
Отправить личное сообщение для cyberblade Посмотреть профиль Найти все сообщения от cyberblade
 
Регистрация: 20.03.2012
Сообщений: 12

Возможно я плохо объясняю (( Простите... Попробую еще раз.

У меня есть на сайте плавающий див (чат) в нем отображаются сообщения по 50-100 шт. С дивом проблем никаких нет он и так на сайте FIXED. проблема в том, что когда крутишь над дивом роликом он скролируется до последней строки, а потом начинает прокручиваться сама страничка (как раз этого и не надо).
Т. е. при позиции мыши над дивом должен быть запрет на скролл главного окна, но возможность скролить сам див. Я нашел решение как в примере верхний див.

Т. е. чтоб почувствовать разницу покрути колесико над разными дивами. В первом случае скрола страницы не будет. Сейчас это достигается тем что в свойствах боди прячется скрол $('body').css("overflow","hidden"); соответственно происходит запрет. Мне нужно получить такой результат иным путем ибо пропадание скрола главной странички освобождает справа 17 пикселей и сайт смещается вправо при наведении мыши на див. Это не очень приятная штука. Решение есть через "костыли" - рисовать отступ справа в главном диве при наведении: $("#main").css({"marginRight":17}); тогда "дерганье" не заметно, но весь косяк в том, что в разных браузерах разная ширина скрола. Скрол может быть настроен самим пользователем в винде. На айпадах и айфонах его вообще нет. Поэтому надо искать какое-то решение.

Я специально пример загрузил. В посте есть ссылка, чтоб не собирать все руками.

Последний раз редактировалось cyberblade, 09.11.2012 в 23:01.
Ответить с цитированием
  #8 (permalink)  
Старый 10.11.2012, 01:17
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Пока на ум приходит только: после полной прокрутки в диве, если мышь ещё в нём, возвращать страницу при скролле в положение, при котором произошёл вход мыши в этот див.
Ответить с цитированием
  #9 (permalink)  
Старый 10.11.2012, 02:56
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

$('body').css("overflow-y","hidden");
Слево-направо скролл останется


Вообще-то правильней привязать еvent к колесу мыши и запретить прокрутку body колесом при наличии чата

Последний раз редактировалось Deff, 10.11.2012 в 03:08.
Ответить с цитированием
  #10 (permalink)  
Старый 10.11.2012, 03:51
Интересующийся
Отправить личное сообщение для cyberblade Посмотреть профиль Найти все сообщения от cyberblade
 
Регистрация: 20.03.2012
Сообщений: 12

bes - Попробовал... В принципе работает, но проблема с "дерганием" меняется как шило на мыло ))))) вертикальное на горизонтальное )))

var mytop=0;
var myblock=0;
$(function() {
	$(".chat").mouseenter(function() {
		if (mytop == 0){
			var topoffset = jQuery('.chat').offset();
			mytop = topoffset.top;
		} else {
			var blockoffset = jQuery('.chat').offset();
			myblock = blockoffset.top;		
		}		
		var scrollY = myblock - mytop;
		window.onscroll = function () {
			$("html,body").animate({"scrollTop":scrollY},0);
		}

		/*
		$('body').css("overflow","hidden");
		$("#main").css({"marginRight":17});
		*/
	}).mouseleave(function() {
		/*
		$('body').css("overflow","visible");
		$("#main").css({"marginRight":0});
		*/
	})
});




2Deff - спасибо, а можно поподробнее про event?

Последний раз редактировалось cyberblade, 10.11.2012 в 08:50.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Исчезающий блок при прокрутке как вконтакте ImDim Элементы интерфейса 1 28.08.2012 09:21
смена div при нажатии на ссылку bars Элементы интерфейса 11 23.10.2009 12:45
Не срабатывает hover при использовании в div IE 6.0 AlexMak (X)HTML/CSS 5 14.05.2009 18:26
Отрыть DIV блок при переходе с другой страницы BuTbka Общие вопросы Javascript 7 08.04.2009 22:59