Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Независимая прокрутка дива колесом (IE only)...

Автор: Zeroglif 1.12.2005, 14:05

На странице есть див с вертикальным скроллом, допустим 200х200 пикселей. Нужно, чтобы в тот момент, когда он в фокусе (фокус передаю заранее), можно было прокручивать контент этого дива колесом мыши обычным образом, но не прокручивать саму страницу. Буду обязан за оптимальный и желательно наипростейший (надёжный) вариант решения задачи.

Спасибо.

Автор: Гость_12345 1.12.2005, 15:32

Затравку кода бы какую, а то писать лень.
К примеру, как Вы делали фокус на диве без щелчка мыши?
По TextRange?
Далее, если нет MouseOver, придётся ловить document.onscroll, возвращать назад и крутить див на ту же величину. Текста много, напишите же основу.

Автор: Aliance 1.12.2005, 15:53

А он разве не крутится? Крутится тот объект, где стоит фокус. У меня, по крайней мере

Автор: Sardar 1.12.2005, 15:53

Если IE only то можно отлавливать onmousewheel на div'е.
По моему мозилла этим не страдает, если мышь над слоем, то скролиться будет именно слой, так что вроде и кроссплатформенно может получиться.

Автор: Zeroglif 1.12.2005, 16:07

Цитата

Затравку кода бы какую, а то писать лень.

Дружище, это я ковыряюсь с эмуляцией селектбокса. Код в рабочем варианте (он не про это), полуразобран, там всего намешано, ничего, кроме путаницы сюда этот код не внесёт. Коротко так: при клике на кнопке под ней создаётся новый див (визуально всё как у селектбокса) с нужным контентом, ему сразу передаётся фокус (div.focus()). Про фокус пишу просто как о факте, на самом деле колесу мыши это должно быть пофигу. При прокрутке дива крутится и вся страница, а не должна. Задача актуальна безотносительно к моему коду, для любого скроллируемого дива на странице.

Код


<html>
    <body>
        <div id='div1' style='height:60px;width:60px;overflow:hidden;overflow-y:scroll;'>
            text1<br>
            text2<br>
            text3<br>
            text4<br>
            text5<br>
            text6<br>
        </div>
    </body>
</html>

Судя по всему, нужно диву добавить обработчик onmousewheel и писать свою функцию для колеса с одновременным запретом действия по умолчанию.
Добавлено @ 16:13

Цитата(Sardar @ 1.12.2005, 15:53)

так что вроде и кроссплатформенно может получиться

Кросс не нужно, эт внутренняя задача, IE-only.

!!!Ребят, не хочу отнимать ваше драгоценное время, или киньте в меня уже готовым вариантом (если уже есть в закромах), или наведите на иное, чем своя функция на onmousewheel. Специально не пишите, разрулю myself.

Автор: Гость_12345 1.12.2005, 19:05

Aliance, а у меня всегда крутится лишь то, что под мышью, а не в фокусе. За исключением селекта, который крутится по фокусу. Разве где-то иначе?

Вот, видно решение. Надо ставить onmousewheel не только диву, но и документу, чтобы, когда мышь не над дивом, крутить его, но документ возвращать на место, если программа считает, что на нём фокус.

Автор: Sardar 1.12.2005, 19:12

Проверил, ИЕ крутит див если по нему кликнуть (передать фокус), просто наведя мышь нет. Мозилла вообще никак див не крутит по мыши... странный прикол...

Автор: Zeroglif 1.12.2005, 22:03

В общем, кроме своей функции ничего в голову пока не пришло. Тогда так (корявенько):

Код


<html>
    <head>
        <script language='javascript'>
        function F(a)
        {
            var s=(event.wheelDelta/120>0)?'scrollbarUp':'scrollbarDown';
            a.doScroll(s);
            return false;
        }
        </script>
    </head>
    <body>
    <br>
        <div id='div1' style='height:60px;width:60px;overflow:hidden;overflow-y:scroll;' onmousewheel='return F(this)'>
            text1<br>
            text2<br>
            text3<br>
            text4<br>
            text5<br>
            text6<br>
        </div>
    </body>
</html>

Автор: Гость_12345 1.12.2005, 23:22

Sardar, у меня же не требует фокуса, крутит как я описал. Вероятно, это ещё зависит от драйвера. В моей A4Tech GreatEye WheelMouse (2-скролльной) есть 2 режима - Enhanced Dual Wheell Mode и IntelliMouse compatible, но ни один из них не приводит к результату, как у тебя.

Zeroglif, не понятен смысл эффекта. Прокрутка стала в другую сторону при наведении мыши на div. При этом, повторюсь, у меня клик или не клик по какой-либо части документа эффекта не меняет. Так что не могу уловить задачи - то ли драйвер мыши мешает, ...?

Автор: Zeroglif 1.12.2005, 23:47

Цитата

Zeroglif, не понятен смысл эффекта. Прокрутка стала в другую сторону при наведении мыши на div. При этом, повторюсь, у меня клик или не клик по какой-либо части документа эффекта не меняет. Так что не могу уловить задачи - то ли драйвер мыши мешает, ...?

Может и дрова виноваты. Моя мышь крутит див вне зависимости от фокуса, лишь бы курсор был над ним.

Что касается прокрутки в обратную сторону, то положительная wheelDelta - это прокрутка от себя (вверх), отрицательная - к себе (вниз)... у меня как бы работает (MS Wireless IntelliMouse Explorer 2.0).

Автор: Гость_12345 2.12.2005, 17:23

> Моя мышь крутит див вне зависимости от фокуса, лишь бы курсор был над ним.
Правильно, только называй своими именами - у мыши не курсор, а указатель. А тебе нужно, чтобы крутилось только при фокусе (т.е. не при наведении, а после клика на div, до клика на другом месте страницы)?

Не понятно, в чём проблема, если ты говоришь, что сам можешь написать. Идеи проговорены. Фокус сообщается через select() объекта TextRange. Причём, нужен не натуральный фокус (который отмечается _Курсором_ в поле ввода, а искусственный).

Автор: Zeroglif 2.12.2005, 21:33

Цитата

называй своими именами - у мыши не курсор, а указатель.

Здорово. То бишь, cursor!=курсор, а div!=див или пиши только на правильном русском, иначе я твоя не понимай? Ладно, будет указатель, не вопрос. smile

Цитата

Не понятно, в чём проблема, если ты говоришь, что сам можешь написать.

Если я могу что-то сам написать, из этого никак не следует, что я автоматически лишаюсь возможности вопрошать совета и проч. smile

Цитата

Фокус сообщается через select() объекта TextRange. Причём, нужен не натуральный фокус (который отмечается _Курсором_ в поле ввода, а искусственный).

Да бог с ним, с фокусом. IE так устроен, что он начинает крутить скролл слоя тогда, когда указатель мыши стоит над этим скроллом, не важно кликал я в этот слой или нет, передавал я ему фокус какими-либо способами или нет. Указатель над слоем - крутится слой.

После того, как скролл слоя достигает своей верхней/нижней точки, а пользователь продолжает крутить колесо, начинает крутиться скролл уже страницы. Задача была в том, чтобы класиво придумать, как отменить скролл страницы только на тот период, пока крутится слой. Придумать-придумалось, но не ндравится.

Автор: Гость_12345 3.12.2005, 00:59

Конечно, непонятно, когда указатель мыши курсором называют и при этом идёт речь о фокусе, который характеризуется наличием курсора ввода символов на элементе.
...
Понятно, значит, надо, чтобы, доходя до верхней строки, скролл дива останавливался и была выделена верхняя строка как в селекте.

Нет ничего проще! (С апломбом.) Лёгким движением мыши пишем такой код:

Код

<html><head><title>Прокрутка строк DIV почти как в Select (IE only)</title>
<script>d=document;
onload=function setTR(){    //иниц. TextRange
        tR=d.body.createTextRange();
    tR.moveToElementText(d.all['div1s'+d.all.div1.selectedLine]);
    tR.select();
}
function F(a){movSel=event.wheelDelta/120;
    sL=parseInt(d.all.div1.selectedLine);
    if(sL>1-(movSel<0) && sL<8+(movSel>0))d.all.div1.selectedLine=sL-=movSel;
    tR.moveToElementText(d.all['div1s'+d.all.div1.selectedLine]);
    tR.select();
    return false;
}
</script>
</head><body>
<div selectedLine=3 id=div1 style='height:8em;width:260;overflow:auto;border-style:solid;border-width:1;padding-left:2'
    onmousewheel='return F(this)'
    onMouseOver=setTR()>
    <span id=div1s1>text1</span><br>
    <span id=div1s2>text2</span><br>
    <span id=div1s3>text3</span><br>
    <span id=div1s4>text4</span><br>
    <span id=div1s5>text5</span><br>
    <span id=div1s6>text6</span><br>
    <span id=div1s7>7</span><br>
    <span id=div1s8>8</span><br>
</div>
</body></html>

(и далее можно импровизировать). Как вам такое решение?

По другим браузерам - В Опере 7.54 это не работает (в 8-й должно), но обратил внимание, что она начинает крутить слой именно по фокусу на нём, т.е. после клика. (Она вообще кривовато кручение колеса мыши воспринимает.)

Автор: Ciber SLasH 3.12.2005, 08:31

Как я понял, Zeroglif хотел следующего эффекта:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<meta name="Generator" content='EditPlus 2.20.211'>
<meta name="Author" content='Ciber SLasH'>
<title>JavaScript :: Остановка просачивания события "onMouseWheel" (IE only)</title>
<script type='text/javascript'>
onload = function () {
var objDIV = document.getElementById("my");

    objDIV.onmousewheel = function () {
        if ((this.scrollTop >= this.clientHeight) && (event.wheelDelta <= -120)) {
            return false;
        }
        if ((this.scrollTop == 0) && (event.wheelDelta >= 120)) {
            return false;
        }
    }
}
</script>
<style type='text/css'>
body {height: 130%}
#my {height: 100px; margin-top: 25%; border: 2px solid black; overflow: auto}
</style>
</head>

<body>
<div id='my'><br><br><br><br><br><br><br><br><br><br><br></div>
</body>
</html>

Автор: Zeroglif 3.12.2005, 18:25

Цитата

Как вам такое решение?

Спасибо, интересно.

Цитата(Ciber @ 3.12.2005, 08:31)

Как я понял, Zeroglif хотел следующего эффекта

Суть вы поняли совершенно правильно, идеальным вариантом было бы именно отловить нижнюю и верхнюю точку скролла и в этот момент запретить прокрутку страницы, не эмулируя скролл дива искусственно. Но, к сожалению, я не знаю, как определить эти точки. Ваш вариант, как принцип, понятен, но не подходит...

Автор: RinOSpro 17.11.2008, 12:22

Извините за некропостерство =)

Но код понравился ) мне как раз такой сейчас не помешал бы...

Только одно но... В примерах от Ciber SLasH и Гость_12345 видна полоса прокрутки если ставлю overflow:hidden то полосы прокрутки не видно но и скрола нет ((.

Как возможно решить данную проблему?

Добавлено через 4 минуты и 15 секунд
Вот одно из моих решений...

Поверх создаю еще слой и делаю его меньше по ширине. Следовательно полоса прокрутки нижнего перекрывается...

Незнаю на сколько это изящное решение... хотел у вас спросить...?

Код


<html>
<head>
<title>JavaScript :: Остановка просачивания события "onMouseWheel" (IE only)</title>
<script type='text/javascript'>
onload = function () {
var objDIV = document.getElementById("my");

    objDIV.onmousewheel = function () {
        if ((this.scrollTop >= this.clientHeight) && (event.wheelDelta <= -120)) {
            return false;
        }
        if ((this.scrollTop == 0) && (event.wheelDelta >= 120)) {
            return false;
        }
    }
}
</script>
<style type='text/css'>
#my {height: 100px; width: 70px; overflow: auto}
#myhide {height: 100px; width: 50px; overflow: hidden}
</style>
</head>

<body>
<div id='myhide'>
<div id='my'><br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br></div>
</div>
</body>
</html>

Автор: RinOSpro 18.11.2008, 10:58

Люююдиии ) ну ваше мнение???