Javascript.RU

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

Событие scroll для элемента div со стилем (overflow-y: hidden)
У меня в проекте два div-элемента, стоят рядом, и надо сделать синхронную прокрутку для них по вертикали, для скрола мыши.
У div-элемента слева скролл скрыт.
Если активен правый div - то по скролу мыши просто:
$('#scroll2').scroll(function() { 				
var fx1 = $(this).scrollTop();
$('#scroll1').scrollTop(fx1);
});

А вот если активен левый - там не срабатывает событие scroll.
Как это решить по-проще?
Ответить с цитированием
  #2 (permalink)  
Старый 18.06.2013, 17:21
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от yavafree
Как это решить по-проще?
Скрыть у второго элемента скролл и обернуть оба в третий, у которого отображается скроллбар. Самый простой и эффективный вариант
Ответить с цитированием
  #3 (permalink)  
Старый 18.06.2013, 17:27
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от danik.js
Скрыть у второго элемента скролл и обернуть оба в третий, у которого отображается скроллбар. Самый простой и эффективный вариант
согласен, и скриптов не надо будет)))
<style>
    div.block {
        owerflow-y: scroll;
        height: 300px;
    }
    div.block div {
        display: table-cell;
        border: 1px solid #000;
    }
</style>
<div class="block">
    <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquet justo elit, eget cursus quam semper eget. Proin posuere nunc sit amet lacus facilisis, in fermentum nisl vehicula. Nullam ornare ultricies ipsum, non interdum ligula venenatis eget. Phasellus iaculis risus a aliquet imperdiet. Nullam molestie egestas laoreet. Curabitur egestas turpis a lacinia rutrum. Nullam euismod iaculis ullamcorper. Mauris odio justo, luctus at mi at, mattis dictum diam. Maecenas tempus enim ac purus fermentum pretium. Vestibulum egestas tortor eu ligula rutrum, sed posuere diam aliquam. Nunc luctus rhoncus pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras vestibulum tempor neque, eget pellentesque nulla dapibus tempus. Suspendisse porttitor felis eu ultrices adipiscing. Integer id sodales elit. </p>

 <p>Suspendisse blandit blandit erat, ac vulputate ante hendrerit sed. Nullam quis orci et erat vehicula tincidunt eu id lectus. Nunc ligula eros, dictum ac sapien non, accumsan ultricies tortor. Mauris tempus vel leo aliquet tempor. Ut non eros imperdiet, pretium dui id, rutrum orci. Vivamus et turpis gravida, cursus nulla at, consectetur diam. Mauris suscipit non justo id rhoncus. Phasellus vulputate mi eu lectus tempus, fermentum iaculis libero aliquet. Cras dictum nibh odio, sed pellentesque metus aliquam vel. Cras euismod, neque in venenatis ullamcorper, arcu ipsum eleifend est, non elementum orci neque in felis. Quisque erat diam, ultricies nec gravida nec, adipiscing a leo. Praesent viverra in libero a iaculis. Etiam sit amet nisl non leo bibendum rhoncus.</p>

 <p>Curabitur pulvinar, urna id tempus suscipit, nisl ipsum vulputate velit, quis lacinia lectus tellus ut metus. Phasellus posuere porttitor nunc sit amet pretium. Nulla at erat leo. Donec sed dui sit amet sem elementum fringilla. Nulla ac metus ut magna lobortis dictum. Quisque sit amet libero a nibh sodales rhoncus ut a arcu. Praesent euismod sit amet nulla eu placerat. Donec facilisis sollicitudin tempus.</p>

 <p>Praesent sit amet est a leo ornare imperdiet. Nullam tempus, lorem et tincidunt malesuada, erat enim vestibulum risus, nec facilisis ante enim sit amet ipsum. In augue turpis, molestie nec accumsan et, malesuada vitae est. Duis vestibulum tempus justo, sed imperdiet magna suscipit sit amet. Sed tellus mi, volutpat id convallis eget, lacinia quis magna. In ullamcorper rutrum nibh, at tincidunt ligula congue nec. Maecenas et scelerisque velit. Morbi interdum aliquet sapien, ut mollis arcu pulvinar vitae.</p>

 <p>Nullam condimentum hendrerit rhoncus. Maecenas auctor ipsum id porta consequat. Vivamus in pulvinar tellus, a ultrices magna. Pellentesque scelerisque leo dolor, eu porta dolor consectetur congue. Aenean ornare, lorem a lacinia cursus, turpis enim imperdiet metus, et tempor tortor urna sed dui. Ut laoreet, ipsum elementum molestie eleifend, felis mauris sollicitudin mi, ac tempus nisl dolor vitae neque. Aliquam erat volutpat. Suspendisse potenti. Curabitur ultrices massa consequat, porta sem at, pulvinar orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel libero malesuada, auctor massa et, imperdiet nunc. Maecenas scelerisque interdum nulla ut semper. Vestibulum varius aliquet metus at tristique.</p></div>
    <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquet justo elit, eget cursus quam semper eget. Proin posuere nunc sit amet lacus facilisis, in fermentum nisl vehicula. Nullam ornare ultricies ipsum, non interdum ligula venenatis eget. Phasellus iaculis risus a aliquet imperdiet. Nullam molestie egestas laoreet. Curabitur egestas turpis a lacinia rutrum. Nullam euismod iaculis ullamcorper. Mauris odio justo, luctus at mi at, mattis dictum diam. Maecenas tempus enim ac purus fermentum pretium. Vestibulum egestas tortor eu ligula rutrum, sed posuere diam aliquam. Nunc luctus rhoncus pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras vestibulum tempor neque, eget pellentesque nulla dapibus tempus. Suspendisse porttitor felis eu ultrices adipiscing. Integer id sodales elit.</p>

 <p>Suspendisse blandit blandit erat, ac vulputate ante hendrerit sed. Nullam quis orci et erat vehicula tincidunt eu id lectus. Nunc ligula eros, dictum ac sapien non, accumsan ultricies tortor. Mauris tempus vel leo aliquet tempor. Ut non eros imperdiet, pretium dui id, rutrum orci. Vivamus et turpis gravida, cursus nulla at, consectetur diam. Mauris suscipit non justo id rhoncus. Phasellus vulputate mi eu lectus tempus, fermentum iaculis libero aliquet. Cras dictum nibh odio, sed pellentesque metus aliquam vel. Cras euismod, neque in venenatis ullamcorper, arcu ipsum eleifend est, non elementum orci neque in felis. Quisque erat diam, ultricies nec gravida nec, adipiscing a leo. Praesent viverra in libero a iaculis. Etiam sit amet nisl non leo bibendum rhoncus.</p>

 <p>Curabitur pulvinar, urna id tempus suscipit, nisl ipsum vulputate velit, quis lacinia lectus tellus ut metus. Phasellus posuere porttitor nunc sit amet pretium. Nulla at erat leo. Donec sed dui sit amet sem elementum fringilla. Nulla ac metus ut magna lobortis dictum. Quisque sit amet libero a nibh sodales rhoncus ut a arcu. Praesent euismod sit amet nulla eu placerat. Donec facilisis sollicitudin tempus.</p>

 <p>Praesent sit amet est a leo ornare imperdiet. Nullam tempus, lorem et tincidunt malesuada, erat enim vestibulum risus, nec facilisis ante enim sit amet ipsum. In augue turpis, molestie nec accumsan et, malesuada vitae est. Duis vestibulum tempus justo, sed imperdiet magna suscipit sit amet. Sed tellus mi, volutpat id convallis eget, lacinia quis magna. In ullamcorper rutrum nibh, at tincidunt ligula congue nec. Maecenas et scelerisque velit. Morbi interdum aliquet sapien, ut mollis arcu pulvinar vitae.</p>

 <p>Nullam condimentum hendrerit rhoncus. Maecenas auctor ipsum id porta consequat. Vivamus in pulvinar tellus, a ultrices magna. Pellentesque scelerisque leo dolor, eu porta dolor consectetur congue. Aenean ornare, lorem a lacinia cursus, turpis enim imperdiet metus, et tempor tortor urna sed dui. Ut laoreet, ipsum elementum molestie eleifend, felis mauris sollicitudin mi, ac tempus nisl dolor vitae neque. Aliquam erat volutpat. Suspendisse potenti. Curabitur ultrices massa consequat, porta sem at, pulvinar orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel libero malesuada, auctor massa et, imperdiet nunc. Maecenas scelerisque interdum nulla ut semper. Vestibulum varius aliquet metus at tristique.</p></div>
</div>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Событие для каждого элемента. Узнать id каждого элемента LysoSutriN jQuery 4 05.01.2012 16:03
focus() для элемента, не поддерживающего событие focus mosgaz jQuery 11 06.12.2011 17:51
как сделать событие для списка node. DimaRogov Events/DOM/Window 5 18.09.2011 16:52
Узнать CSS правило для элемента vinet Events/DOM/Window 4 10.12.2010 08:12
Скрипт для динимического изменения div arsen Общие вопросы Javascript 3 30.09.2010 11:29