Javascript.RU

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

Событие только для горизонтального скрола
Подскажите пожалуйста как прописать условие только для горизонтального скролла?

Т.е. мне нужно добавить класс для div только в том случае если я меняю горизонтальный скролл но никак не вертикальный

P.S ВСЕМ ПОМОГАЮЩИМ ПОДНИМАЮ КАРМУ -)
Ответить с цитированием
  #2 (permalink)  
Старый 08.09.2013, 15:22
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,017

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<style type="text/css">
.scroll {
	background: #222;
	color: #DDD;
	height: 100px;
	overflow: auto;
	width: 100px;
}
</style>
</head>

<body>
<div class="scroll">
JavaScript является объектно-ориентированным языком, но используемое в языке прототипирование обуславливает отличия в работе с объектами по сравнению с традиционными класс-ориентированными языками. Кроме того, JavaScript имеет ряд свойств, присущих функциональным языкам — функции как объекты первого класса, объекты как списки, карринг, анонимные функции, замыкания — что придаёт языку дополнительную гибкость.
</div>

<script type="text/javascript">
window.onload = function() {
	var elem = document.querySelector('.scroll') || document.getElementsByClassName('scroll')[0],
		scroll = 0;
	
	elem.onscroll = function() {
		if(this.scrollLeft != scroll) {
			scroll = this.scrollLeft;
			alert('Scroll');
		}
	}
}
</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 08.09.2013, 15:32
Аватар для Joannes
Интересующийся
Отправить личное сообщение для Joannes Посмотреть профиль Найти все сообщения от Joannes
 
Регистрация: 07.09.2013
Сообщений: 12

Отлично. То что нужно. Огромное спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 08.09.2013, 16:40
Профессор
Отправить личное сообщение для Яростный Меч Посмотреть профиль Найти все сообщения от Яростный Меч
 
Регистрация: 12.04.2010
Сообщений: 557

Сообщение от Ruslan_xDD
document.querySelector('.scroll') || document.getElementsByClassName('scroll')[0]
а в старом браузере это прокатит? разве не вывалит ошибку "нет функции querySelector" или типа того?
Ответить с цитированием
  #5 (permalink)  
Старый 08.09.2013, 17:03
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Яростный Меч, querySelector есть в таком старичке как IE8. Этого вполне достаточно для 99% сайтов.
Ruslan_xDD, назови мне браузер где есть getElementsByClassName но нету querySelector
Ответить с цитированием
  #6 (permalink)  
Старый 08.09.2013, 17:12
Аватар для Joannes
Интересующийся
Отправить личное сообщение для Joannes Посмотреть профиль Найти все сообщения от Joannes
 
Регистрация: 07.09.2013
Сообщений: 12

Еще вопрос... Как прописать правильно, если позиция вертикального скролла от нижней границы меньше 100px?
Ответить с цитированием
  #7 (permalink)  
Старый 08.09.2013, 18:08
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,017

danik.js, ну, а вдруг Перестраховаться никогда не помешает.

Яростный Меч, точно.
document.querySelector ? document.querySelector('.scroll') : document.getElementsByClassName('scroll');


Хотя мне кажется, что document.getElementsByClassName должна работать быстрее, чем query.

Последний раз редактировалось ruslan_mart, 08.09.2013 в 18:21.
Ответить с цитированием
  #8 (permalink)  
Старый 08.09.2013, 18:13
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,017

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<style type="text/css">
.scroll {
	background: #222;
	color: #DDD;
	height: 100px;
	overflow: auto;
	width: 100px;
}
</style>
</head>

<body>
<div class="scroll">
JavaScript является объектно-ориентированным языком, но используемое в языке прототипирование обуславливает отличия в работе с объектами по сравнению с традиционными класс-ориентированными языками. Кроме того, JavaScript имеет ряд свойств, присущих функциональным языкам — функции как объекты первого класса, объекты как списки, карринг, анонимные функции, замыкания — что придаёт языку дополнительную гибкость.
</div>

<script type="text/javascript">
window.onload = function() {
	var elem = document.getElementsByClassName('scroll')[0],
		scroll = 0;
	
	elem.onscroll = function() {
		if(this.scrollLeft != scroll) {
			scroll = this.scrollLeft;
			alert('Scroll');
		}
		else if(this.scrollTop > this.scrollHeight - 100) {
			alert('Scroll Bottom < 100px');
		}
	}
}
</script>
</body>
</html>

Последний раз редактировалось ruslan_mart, 08.09.2013 в 18:19. Причина: Не так написал. :)
Ответить с цитированием
  #9 (permalink)  
Старый 08.09.2013, 18:20
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,017

Поправил код, ошибся кое-где.
Ответить с цитированием
  #10 (permalink)  
Старый 08.09.2013, 18:50
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Ruslan_xDD
danik.js, ну, а вдруг Перестраховаться никогда не помешает.
И это слова программиста?
Сообщение от Ruslan_xDD
Хотя мне кажется, что document.getElementsByClassName должна работать быстрее, чем query.
Так и есть. Но смысл в этой оптимизации абсолютно отсутствует. Разве что если ты способен воспринять задержку в долю миллисекунды.
Сообщение от Ruslan_xDD
Поправил код, ошибся кое-где.
Теперь он не работает в IE8, хотя я бы не стал его списывать со счетов.
И где ты берешь такие допотопные шаблоны? Доктайп полу-квиркнутый, какое то подобие XHTML, с кучей лишнего хлама (неймспейс, обязательные атрибуты, хотя их дефолтные значения очевидны донельзя), win1251 кодировка. Мне бы было стыдно это постить
__________________
В личку только с интересными предложениями
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Событие scroll для элемента div со стилем (overflow-y: hidden) yavafree jQuery 2 18.06.2013 17:27
Это только для профи(всплывающее сообщение) Derack Элементы интерфейса 6 23.07.2009 14:22
Не работает AppendChild для div, причём только в IE _Kpot_ Internet Explorer 5 12.02.2009 10:55
JS'ом поменять textDecoration только для случаев link и visited lancer Элементы интерфейса 3 05.04.2008 20:51