Форум

cyberblade · #1 (**permalink**) 09.11.2012, 08:34

Ну и название темы....

Столкнулся с такой проблемой. Есть плавающий див с текстом, после прокрутки дива начинает прокручиваться сама страничка (что нежелательно пока мыша находится над дивом).

На данный момент нормального решения не нашел.

В идеале должно получиться что-то вроде первого варианта (см. пример):

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

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

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

Severtain · #2 (**permalink**) 09.11.2012, 09:16

Поищи методы статического фона для BODY.
<BODY background="Фоновое изображение" bgproperties=fixed>

cyberblade · #3 (**permalink**) 09.11.2012, 09:32

Не работает

Severtain · #4 (**permalink**) 09.11.2012, 21:59

Ну правильно!
Ваша проблема в том, что у вас дивы зафиксинные.! Разберемся пока с ними, а потом с фоном! Вообщем например так :
<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"> // зачем это нужно ?!

Severtain · #5 (**permalink**) 09.11.2012, 22:03

Стоп! Понял, что вам надо! Сейчас помогу!

Severtain · #6 (**permalink**) 09.11.2012, 22:08

<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;">

вот пожалуйста )
А вообще это очень легко гуглится!

cyberblade · #7 (**permalink**) 09.11.2012, 22:51

Возможно я плохо объясняю

(( Простите... Попробую еще раз.

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

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

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

bes · #8 (**permalink**) 10.11.2012, 01:17

Пока на ум приходит только: после полной прокрутки в диве, если мышь ещё в нём, возвращать страницу при скролле в положение, при котором произошёл вход мыши в этот див.

Deff · #9 (**permalink**) 10.11.2012, 02:56

$('body').css("overflow-y","hidden");

Слево-направо скролл останется

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

cyberblade · #10 (**permalink**) 10.11.2012, 03:51

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?

Форум

Справочник

Discord чат

Курсы javascript