Указать обьект для прокрутки
Можно ли каким нибудь образом указать который элемент страницы должен прокручиваться.
Например: окно броузера, в окне есть прокрутка, т.к. там всякие элементы. И есть див, у которого тоже есть прокрутка. Есть возможность указать как нибудь, что при прокрутке колёсика мыши, должно прокручиваться не содержимое броузера, а содержимое дива? Вcя фишка в том, что на див не нужно кликать, он появился например при помощи скрипта, и на нем автоматический фокус. |
перехватывай событие.
function mufuncwheel( e ) {
// тут обрабатывай событие прокрутки колеса мыши.
e = e || window.event;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
if ( document.addEventListener ) {
document.addEventListener( 'DOMMouseScroll', mufuncwheel, false );
} else {
document.attachEvent( 'onDOMMouseScroll', mufuncwheel );
}
|
Цитата:
|
// Функция для обработки колеса мыши на документе
function mufuncwheel( e ) {
// тут обрабатывай событие прокрутки колеса мыши.
// собственно само событие, для ИЕ берем из window
e = e || window.event;
// Предотвращаем дальнейшее всплытие события
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
// Отменяем действие по умолчанию для события
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
// Вешаем событие на документ
if ( document.addEventListener ) {
document.addEventListener( 'DOMMouseScroll', mufuncwheel, false );
} else {
document.attachEvent( 'onDOMMouseScroll', mufuncwheel );
}
|
а как же событие onmousewheel для ие?
|
Цитата:
window.onmousewheel = mufuncwheel; |
))) Спасибо, правда нужно разобраться, не совсем доганяю как это мне поможет.
|
ну дальше все проще после строки e = e || window.event;
вставляй напирмер код: if ( e.wheelDelta ) {
wheelDelta = e.wheelDelta / 120;
} else if ( e.detail ) {
wheelDelta = -e.detail / 3;
}
if ( wheelDelta < 0 ) {
// мышь крутанули вниз
// тут можешь прибавлять значение scrollTop своего дива
} else if ( wheelDelta > 0 ) {
// мышь крутанули вверх
// тут можешь уменьшать значение scrollTop своего дива
}
|
Цитата:
|
dmitriymar,не рассказывай мне сказки... сам везде так делаю как я описал выше и пашет даже в ИЕ5. ;)
|
devote,
я не отрицаю что если добавить window.onmousewheel = mufuncwheel; он будет работать везде. но document.attachEvent-это подключение событий по модели ие ,но вот в ие нет события DOMMouseScroll,есть событие onmousewheel. лучше валидный код изначально писать чем натыкать всё подряд.... |
Если вас не затруднит, можете подвести итог и написать как это выглядеть должно. Я был бы очень признатален.
|
// Функция для обработки колеса мыши на документе
function mufuncwheel( e ) {
// тут обрабатывай событие прокрутки колеса мыши.
// собственно само событие, для ИЕ берем из window
e = e || window.event;
if ( e.wheelDelta ) {
wheelDelta = e.wheelDelta / 120;
} else if ( e.detail ) {
wheelDelta = -e.detail / 3;
}
if ( wheelDelta < 0 ) {
// мышь крутанули вниз
// тут можешь прибавлять значение scrollTop своего дива
} else if ( wheelDelta > 0 ) {
// мышь крутанули вверх
// тут можешь уменьшать значение scrollTop своего дива
}
// Предотвращаем дальнейшее всплытие события
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
// Отменяем действие по умолчанию для события
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
// Вешаем событие на документ
if ( document.attachEvent ) {
document.attachEvent( 'onDOMMouseScroll', mufuncwheel );
} else {
document.addEventListener( 'DOMMouseScroll', mufuncwheel, false );
}
|
А в функцию в качестве переменной "е" что нужно задавать?
|
ничего, туда DOM свое событие засунет... все что тебе нужно это обрабатывать твой див там где я описал... остального ничего не надо... самому вызывать эту функцию не надо.
|
if ( document.attachEvent ) {
document.attachEvent ( 'onmousewheel', mufuncwheel, false );
} else {
document.addEventListener("DOMMouseScroll", mufuncwheel, false);;
}
|
На сколько я понимаю я могу сделать так, когда заканчивается финкция где создается див, я проверяю
if ( document.attachEvent ) {
document.attachEvent ( 'onmousewheel', mufuncwheel, false );
} else {
document.addEventListener("DOMMouseScroll", mufuncwheel, false);;
}
это в свою очередб вызывает функцию mufuncwheel в которой я выставляю if ( wheelDelta < 0 ) {
// мышь крутанули вниз
// тут можешь прибавлять значение scrollTop своего дива
} else if ( wheelDelta > 0 ) {
// мышь крутанули вверх
// тут можешь уменьшать значение scrollTop своего дива
}
почему то у меня не работает mufuncwheel сделал там алерт, ничего не вышло. |
еп.
// Функция для обработки колеса мыши на документе
function mufuncwheel( e ) {
// тут обрабатывай событие прокрутки колеса мыши.
// собственно само событие, для ИЕ берем из window
e = e || window.event;
if ( e.wheelDelta ) {
wheelDelta = e.wheelDelta / 120;
} else if ( e.detail ) {
wheelDelta = -e.detail / 3;
}
var elem = document.getElementById('my_div');
if ( wheelDelta < 0 ) {
// мышь крутанули вниз
elem.scrollTop += 10;
// тут можешь прибавлять значение scrollTop своего дива
} else if ( wheelDelta > 0 ) {
// мышь крутанули вверх
elem.scrollTop -= 10;
// тут можешь уменьшать значение scrollTop своего дива
}
// Предотвращаем дальнейшее всплытие события
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
// Отменяем действие по умолчанию для события
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
window.onload = function() {
// Вешаем событие на документ
if ( document.attachEvent ) {
document.attachEvent( 'onmousewheel', mufuncwheel );
} else {
document.addEventListener( 'DOMMouseScroll', mufuncwheel, false );
}
}
<html> <body> <div id="my_div" style="width: 200px; height: 200px; overflow: auto;">многа контента, тут очень много что даже появился скролл</div> </body> </html> |
Большое спасибо всё работает ) только последний вопрос, а при вызове mufuncwheel я могу в неё передать переменную (ид дива к которому применять прокрутку)?
|
Цитата:
|
Не совсем понял, например у меня есть функция
scroll_div(d); д - ид дива для прокрутки function scroll_div(d) {
//Вешаем событие на документ
if ( document.attachEvent ) {
document.attachEvent( 'onmousewheel', mufuncwheel );
} else {
document.addEventListener( 'DOMMouseScroll', mufuncwheel, false );
}
}
как мне в mufuncwheel запихнуть "д" я так понимаю родитель в вашем контексте это scroll_div |
нет, родитель функции mufuncwheel тоесть вам нужно весь код что я дал поместить в функцию, и ваша d будет использоваться внутри функции mufuncwheel получая значение из внешнего [[scope]]
|
| Часовой пояс GMT +3, время: 03:22. |