Javascript.RU

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

<div> и скролл
Здравствуйте, делая некоторые элементы дизайна в своём проекте, наткнулся на небольшую проблему. Суть в том чтобы в определённом месте html страницы был <div> (с невидимым но рабочим скроллом) пример тут:
http://my.sunshine-rp.ru/test.html
зайдя на страницу, и прокручивая скролл, необходимо чтобы прокручивался текст именно в <div>'e, даже если курсор мыши находится за его пределами.
Надеюсь что это реально осуществить, за помощь буду очень благодарен.
Ответить с цитированием
  #2 (permalink)  
Старый 04.07.2012, 20:49
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Vetall,
Вопрос такой - на самой странице справо, в реале - будет прокрутка ?

Поскольку если есть - каким макаром пользователь её прокрутит ?
Ответить с цитированием
  #3 (permalink)  
Старый 04.07.2012, 20:51
Интересующийся
Отправить личное сообщение для Vetall Посмотреть профиль Найти все сообщения от Vetall
 
Регистрация: 09.06.2012
Сообщений: 19

Deff,
Есть, но она совсем не подходит
Ответить с цитированием
  #4 (permalink)  
Старый 04.07.2012, 20:52
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Vetall,
блин =- я не про то - я про логику работы - если колесиком крутим внутри - кто прокрутит страницу ?

Может стоит обрамить этот блок еще в один с большей площадью и отслеживать: если курсор внутри этого поля - то прокручиваем внутренний - коли вышел - наружний ?

Последний раз редактировалось Deff, 04.07.2012 в 20:54.
Ответить с цитированием
  #5 (permalink)  
Старый 04.07.2012, 20:55
Интересующийся
Отправить личное сообщение для Vetall Посмотреть профиль Найти все сообщения от Vetall
 
Регистрация: 09.06.2012
Сообщений: 19

Deff,
Мы, но как это относится к сути вопроса?
Ответить с цитированием
  #6 (permalink)  
Старый 04.07.2012, 20:57
Интересующийся
Отправить личное сообщение для Vetall Посмотреть профиль Найти все сообщения от Vetall
 
Регистрация: 09.06.2012
Сообщений: 19

Deff,
Наружного скролла не будет, т.к. эта страница будет подстраиваться под экран пользователя, что-то похожее можно увидеть в диалогах "ВКонтакте".
Ответить с цитированием
  #7 (permalink)  
Старый 04.07.2012, 21:13
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от Vetall
Наружного скролла не будет,
Если Вы уверены в этом, - тогда один Вариант - если нет - другой!
т.е я кручу скролл - не думая , что страница прокрутицо - если больше экрана ?
Ответить с цитированием
  #8 (permalink)  
Старый 04.07.2012, 21:14
Интересующийся
Отправить личное сообщение для Vetall Посмотреть профиль Найти все сообщения от Vetall
 
Регистрация: 09.06.2012
Сообщений: 19

Deff,
Его не будет, в этом я уверен.
Ответить с цитированием
  #9 (permalink)  
Старый 04.07.2012, 21:20
Интересующийся
Отправить личное сообщение для Vetall Посмотреть профиль Найти все сообщения от Vetall
 
Регистрация: 09.06.2012
Сообщений: 19

Deff,
Аналогично "ВКонтакте" диалоги реализованы, если страница больше экрана, она просто выходит за его пределы без скроллов.
Ответить с цитированием
  #10 (permalink)  
Старый 04.07.2012, 21:54
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от Vetall
Аналогично "ВКонтакте" диалоги реализованы, если страница больше экрана, она просто выходит за его пределы без скроллов.


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>overflow</title>
  <style>
   .layer {
    overflow: scroll; /* Добавляем полосы прокрутки */
    width: 300px; /* Ширина блока */
    height: 150px; /* Высота блока */
    padding: 5px; /* Поля вокруг текста */
    border: solid 1px black; /* Параметры рамки */
    scrollbar-face-color: FFFFFF;
scrollbar-track-color: FFFFFF;
scrollbar-arrow-color: FFFFFF;
scrollbar-highlight-color: FFFFFF;
scrollbar-3dlight-color: FFFFFF;
scrollbar-shadow-color: FFFFFF;
scrollbar-darkshadow-color: FFFFFF;
   } 


  </style>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
 </head>
 <body> 
   <div class="layer">
   <h2>Duis te feugifacilisi</h2>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
    nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
    Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
    lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div> 
А тут ещё какойто текст или картинки...
 </body>
</html>
<script type="text/javascript">
 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 (event.preventDefault)  event.preventDefault();
     delta = delta*8;
     event.returnValue = false;
     var ScrllBlk=$(".layer");
     var Height=ScrllBlk.height();
     var Top = ScrllBlk.scrollTop();
     if(Firefox) delta = -delta;
     ScrllBlk.scrollTop(Top+delta);return delta;

}exampleActivate()
</script>

Последний раз редактировалось Deff, 04.07.2012 в 23:02.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скролл как вконтакте shilinpavel Javascript под браузер 3 14.06.2012 18:44
Скролл popup'а alexey_samara Элементы интерфейса 4 26.05.2012 11:41
Скролл вверх при клике ie6/7/8 dr_gluk jQuery 0 21.03.2012 11:12
Определить присутствует ли скролл на iframe sergiyko Общие вопросы Javascript 3 14.03.2011 23:15
Плавный скролл колёсиком Alerto Элементы интерфейса 5 27.08.2009 11:46