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

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

Форум программистов > JavaScript: для новичков > получение высоты div имеющего scroll

Автор: shtuceron 6.8.2011, 20:40

Добрый вечер, подскажите как можно получить размеры элемента div, который имеет scroll, т. е. не его экранные размеры а размеры как будто нет scroll-а и он вытянут во всю свою высоту (ширину).

Спасибо!

Автор: Amphiluke 6.8.2011, 20:59

Свойство scrollHeight.

Автор: shtuceron 8.8.2011, 12:32

спасибо, это как раз оно, а можете подсказать как можно перехватить событие на прокрутку вниз (вверх) div-а, я могу обрабатывать событие scroll, но оно не дает мне выполнять прокрутку или я не знаю как это реализовать...

Автор: Amphiluke 8.8.2011, 19:21

Цитата(shtuceron @ 8.8.2011, 16:32

)

а можете подсказать как можно перехватить событие на прокрутку вниз (вверх) div-а, я могу обрабатывать событие scroll, но оно не дает мне выполнять прокрутку или я не знаю как это реализовать...

Ничего непонятно. Так можете или нет обрабатывать событие scroll? Если можете, зачем спрашиваете, как перехватывать? И вообще перехватывать нужно или «выполнять прокрутку»?
Сформулируйте проблему конкретнее.

Автор: shtuceron 9.8.2011, 12:52

я хочу отказаться от стандартной прокрутки дива и сделать свою, а событие скролл не дает мне это делать, поэтому я хотел узнать как можно реализовать прокрутку

Автор: shtuceron 9.8.2011, 20:45

В общем я скачал плагин к jQuery (mouseWheel - http://brandonaaron.net/code/mousewheel/demos) и привожу получившийся код, он почти рабочий, однако есть минус - когда я прокручиваю в самый низ происходит застопоривание и не сразу происходит прокрутка вверх, подскажите пожалуйста где косяк.

Код


<html>
<head>
        <script type="text/javascript" src="./script/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="./script/jquery-ui-1.8.14.min.js"></script>
    <script type="text/javascript" src="./script/jquery-mousewheel.min.js"></script>
    
    <style type=text/css>
        #container {
            width: 100px;
            height: 200px;
            overflow: hidden;
            background-color: #DDDDDD;
        }
</style>
</head>
<body>
<div id="container">
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
</div>
<script type=text/javascript>
    var scrollDelta = 0;

    $('#container').mousewheel(function(event, delta)
    {
        scrollDelta -= 10*delta;
        
        if (scrollDelta >= ($('#container')[0].scrollHeight))
        {
            scrollDelta = $('#container')[0].scrollHeight;
        }
        
        if (scrollDelta < 0) {
            scrollDelta = 0;
        }
        
        $('#container').scrollTop(scrollDelta);
    });
</script>
</body>
</html>

Автор: Amphiluke 9.8.2011, 21:04

Это просто понять. smile

Вы ставите завышенное условие на предел прокрутки:

Цитата(shtuceron @ 10.8.2011, 00:45

)

if (scrollDelta >= ($('#container')[0].scrollHeight))

На самом деле, контейнер конечной высоты не может быть прокручен больше, чем на значение scrollHeight минус видимая высота контейнера.

Поэтому запись должна быть примерно в таком ключе:

Код


        if (scrollDelta >= ($('#container')[0].scrollHeight) - $('#container').height())
        {
            scrollDelta = $('#container')[0].scrollHeight - $('#container').height();
        }

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

Добавлено через 3 минуты и 31 секунду
http://forum.vingrad.ru/index.php?showtopic=320051&view=findpost&p=2282043, кстати, поднималась несколько схожая тема, откуда можно тоже выудить пример реализации перехвата события вращения колеса мыши.

Автор: shtuceron 10.8.2011, 19:53

Amphiluke - спасибо!