Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.02.2014, 01:14
Новичок на форуме
Отправить личное сообщение для Lexussab Посмотреть профиль Найти все сообщения от Lexussab
 
Регистрация: 05.02.2014
Сообщений: 2

Прокрутка div в независимости от положения курсора
Добрый вечер!
Помогите пожалуйста советом начинающему. Два дня не могу решить задачку
Есть страница у которой есть scroll, а внутри нее есть div содержимое которого тоже прокручивается.
Как сделать чтоб при прокрутке колесиком страница прокручивалась, например, до середины, потом прокручивался целиком div, потом остаток страницы. И все это в независимости от положения курсора.
У меня самая загвоздка в том, что я не могу прокрутить div, если курсор вне его границы.
Ответить с цитированием
  #2 (permalink)  
Старый 05.02.2014, 09:05
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

МОгу натолкнуть на мыслю - исльзуйте jquery scroll() - определяйте в переменную (например WH ) высоту страницы, и сравнивайте на событие скролл на сколько она прокрутилась (для этого есть метод offset().top), если offset().top <= (WH/2) значит докрутились до середины и чтобы страница больше не крутилась:
$(window).scroll(function(){
 $(this).scrollTop(WH/2)//как то так
  var div = $('#div');//твой див
  var sclt=div.srcollTop();
  div.srcollTop(sclt-10)//на каждую прокрутку колеса добавляем твоему диву 10 или 20 пх,сколько хочешь.
})

так же ловим момент когда див дошел до верха и и начинаем снова крутить страницу.

Вобщем такая концепция придумалась мне. Вышеприведенный код конечно не решит вашей проблемы, а может и вовсе нерабочий )) , и вообще архитектуру вам еще только предстоит продумать. Надеюсь дал сподвижку.
Ответить с цитированием
  #3 (permalink)  
Старый 05.02.2014, 19:33
Новичок на форуме
Отправить личное сообщение для Lexussab Посмотреть профиль Найти все сообщения от Lexussab
 
Регистрация: 05.02.2014
Сообщений: 2

Большое спасибо! Очень помогло выйти из ступора.
Ответить с цитированием
  #4 (permalink)  
Старый 17.02.2014, 22:51
Новичок на форуме
Отправить личное сообщение для Marmelade Посмотреть профиль Найти все сообщения от Marmelade
 
Регистрация: 17.02.2014
Сообщений: 4

Ребят, у меня практически такая же ситуация, только сначала нужно прокрутить див, а потом по окончанию информации в нем чтобы див уехал и приехал footer, ищу уже несколько дней, не могу найти решение Помогите, а?
Ответить с цитированием
  #5 (permalink)  
Старый 17.02.2014, 22:55
Новичок на форуме
Отправить личное сообщение для Marmelade Посмотреть профиль Найти все сообщения от Marmelade
 
Регистрация: 17.02.2014
Сообщений: 4

<script type="text/javascript">
	$(document).ready(function() {
var blockScroll = true; // Флаг, указывающий нужно ли блокировать скролл страницы
	 
	 	$('#contentBlock').scroll(function(){
			var gHeightsc = $('#contentBlock').scrollTop();
			var gHeightBlockNew = $('#contentBlocknew').height();
			var gHeight = $('#contentBlock').height();
			gHeightesResult = gHeightBlockNew - gHeight;
			if(gHeightsc==gHeightesResult){
				var blockScroll = false;
			}
			
			
		});	
	

 var UA=window.navigator.userAgent;
 var Firefox = UA.match(/Firefox\/\w+\.\w+/i);
function addHandler(object, event, handler, useCapture) {
     if (object.addEventListener) {
         object.addEventListener(event, handler, useCapture ? useCapture : false);
     } else if (object.attachEvent) {
         object.attachEvent('on' + event, handler);
     } else alert("Add handler is not supported");
}
// Добавляем обработчики
/* Gecko */
 addHandler(window, 'DOMMouseScroll', wheel);
/* Opera */
 addHandler(window, 'mousewheel', wheel);
/* IE */
 addHandler(document, 'mousewheel', wheel);
// Обработчик события
function wheel(event) {
     var delta; // Направление скролла
     // -1 - скролл вниз
     // 1  - скролл вверх
     event = event || window.event;
     // Opera и IE работают со свойством wheelDelta
     if (event.wheelDelta) {
         delta = event.wheelDelta / 120;
         // В Опере значение wheelDelta такое же, но с противоположным знаком
         //if (window.opera) delta = -delta;
          delta = -delta;
     // В реализации Gecko получим свойство detail
     } else if (event.detail) {
         delta = -event.detail / 3;
     }
		
     // Запрещаем обработку события браузером по умолчанию
	if (blockScroll) {     
		 if (event.preventDefault)  event.preventDefault();
	     delta = delta*8;
	     event.returnValue = false;
	     var ScrllBlk=$("#contentBlock");
	     var Height=ScrllBlk.height();
	     var Top = ScrllBlk.scrollTop();
	     if(Firefox) delta = -delta;
	     ScrllBlk.scrollTop(Top+delta);return delta;
	}
}

}); //Конец ready
	

</script>


получился вот такой код, там есть флаг, нашел в инете, если он true, то тогда блок #contentBlock прокручивается, скролл мыши привязан к нему, остальная страница стоит, нужно сделать, чтобы менялся true на false, я прописал код, он идет в самом вверху, все работает, в переменную попадает false, а что делать дальше и как это связать, не понимаю
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
смена div блока при наведении курсора мыши Денис2201 Общие вопросы Javascript 3 07.10.2013 13:43
полный мрак с позицией курсора в editable div Atarion Элементы интерфейса 3 26.04.2013 00:20
скрипт определения положения курсора есть, но немного не работает Александр х@к Элементы интерфейса 2 03.09.2011 16:34
Отслеживание положения курсора beat Общие вопросы Javascript 4 25.06.2011 10:46
Смена картинок в зависимости от положения курсора мыши antonio_vrn Events/DOM/Window 3 31.05.2011 22:07