Событие только для горизонтального скрола
Подскажите пожалуйста как прописать условие только для горизонтального скролла?
Т.е. мне нужно добавить класс для div только в том случае если я меняю горизонтальный скролл но никак не вертикальный P.S ВСЕМ ПОМОГАЮЩИМ ПОДНИМАЮ КАРМУ -) |
<!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>
|
Отлично. То что нужно. Огромное спасибо!
|
Цитата:
|
Яростный Меч, querySelector есть в таком старичке как IE8. Этого вполне достаточно для 99% сайтов.
Ruslan_xDD, назови мне браузер где есть getElementsByClassName но нету querySelector |
Еще вопрос... Как прописать правильно, если позиция вертикального скролла от нижней границы меньше 100px?
|
danik.js, ну, а вдруг :) Перестраховаться никогда не помешает. :)
Яростный Меч, точно.
document.querySelector ? document.querySelector('.scroll') : document.getElementsByClassName('scroll');
Хотя мне кажется, что document.getElementsByClassName должна работать быстрее, чем query. |
<!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>
|
Поправил код, ошибся кое-где.
|
Цитата:
Цитата:
Цитата:
И где ты берешь такие допотопные шаблоны? Доктайп полу-квиркнутый, какое то подобие XHTML, с кучей лишнего хлама (неймспейс, обязательные атрибуты, хотя их дефолтные значения очевидны донельзя), win1251 кодировка. Мне бы было стыдно это постить :) |
Цитата:
Цитата:
Цитата:
Цитата:
|
Ruslan_xDD,
danik.js, Ребят помогите доработать скрипт http://upollster.ru/test/ Если я опускаю вертикальный скролл вниз то там срабатывает условие: Если до самого низа осталось меньше 60 пикселей то к классу .bottom прибавляем количество оставшихся пикселей до конца, т.е. после того как осталось 60 рпикселей, у класса .bottom поялвяется bottom:++; Но беда в том, то когда я меняю размер браузерного окна, то при скроле опять получается отсуп а мне ненужно это -( Попробуйте у себя так нагляднее будет... Вот скрипт:
var $div = $(window),
$scroll = $('#scroll'),
$inner = $('body'),
innerHeight = $inner.outerHeight(),
divHeight = $div.innerHeight();
$div.scroll(function() {
var scrollBottom = innerHeight - divHeight - $div.scrollTop();
$scroll.val(scrollBottom + ' px');
if (scrollBottom<=60) {
$('.bottom').addClass('red');
$('.bottom').css('bottom', 110 -scrollBottom);
}else{
$('.bottom').css('bottom', 50 );
$('.bottom').removeClass('red');
};
});
|
| Часовой пояс GMT +3, время: 15:33. |