Всегда прокручивайте элемент div, а не саму страницу - PullRequest
Новая
       33

Всегда прокручивайте элемент div, а не саму страницу

10 голосов
/ 15 апреля 2011

У меня есть макет страницы с внутренним элементом <div id="content">, который содержит важные элементы на странице. Важная часть о дизайне: 

#content {
  height: 300px;
  width: 500px;
  overflow: scroll;
}

Теперь, когда содержащий текст больше, чем 300px, я должен иметь возможность прокручивать его. Можно ли прокрутить <div>, даже если мышь не наводит на элемент (клавиши со стрелками также должны работать)?

Обратите внимание, что я не хочу отключать "глобальную" прокрутку: на странице должно быть две полосы прокрутки, глобальная полоса прокрутки и полоса прокрутки для <div>.

Единственное, что изменяется, это то, что внутренний <div> должен всегда прокручиваться, если он больше не может быть перемещен (в этом случае страница должна начать прокручиваться).

Можно ли это как-то достичь?

Редактировать

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

Первое изображение - это то, как выглядит страница при открытии.

Теперь мышь сидит в указанном положении и прокручивает, и что должно произойти, это

  • Сначала внутренний div прокручивает свое содержимое (рис. 2)
  • Внутренний блок завершил прокрутку (рис. 3)
  • Элемент body прокручивается так, что сам div перемещается. (Рис. 4)

Надеюсь, теперь это немного яснее.

Scroll concept (Изображение благодаря gomockingbird.com)

Ответы [ 6 ]

2 голосов
/ 15 апреля 2011

Я не думаю, что этого можно добиться без написания сценариев, что может быть грязно, учитывая многочисленные события, прокручивающие элемент (щелчок, колесо прокрутки, стрелка вниз, пробел).

1 голос
/ 15 апреля 2011

вот решение, которое может работать: (fiddle: http://jsfiddle.net/maniator/9sb2a/)

var last_scroll = -1;
$(window).scroll(function(e){
    if($('#content').scrollTop());
    var scroll = $('#view').data('scroll');
    if(scroll == undefined){
        $('#content').data('scroll', 5);
        scroll = $('#content').data('scroll');
    }
    else {
        $('#content').data('scroll', scroll + 5);
        scroll = $('#view').data('scroll');
    }
    /*
    console.log({
        'window scroll':$('window').scrollTop(), 
        'scroll var': scroll, 
        'view scroll':$('#view').scrollTop(),
        'view height':$('#view').height(),
        'ls': last_scroll 
    });
    //*/
    if(last_scroll != $('#content').scrollTop()){ //check for new scroll
        last_scroll = $('#content').scrollTop()
        $('#content').scrollTop($('#content').scrollTop() + scroll);

        $(this).scrollTop(0);
        //console.log(e, 'scrolling');
    }

})

Это немного глючит, но это начало: -)

1 голос
/ 15 апреля 2011

Можно использовать плагин прокрутки jQuery.Я знаю, что у него есть возможность создавать полосы прокрутки на div.Единственное, что вам нужно добавить - это логика, чтобы ловить события при нажатии кнопок клавиатуры.Просто проверьте коды клавиш для клавиш со стрелками и сделайте прокрутку div вниз.

Плагин можно найти здесь .

Вы можете использовать его следующим образом; 

<script type="text/javascript">
  // append scrollbar to all DOM nodes with class css-scrollbar
  $(function(){
    $('.css-scrollbar').scrollbar();
  })
</script>
0 голосов
/ 18 апреля 2013

Я нашел решение ... Не идеально ... http://jsfiddle.net/fGjUD/6/.

CSS: 

body.noscroll {
    position: fixed;
    overflow-y: scroll;
    width: 100%;
}

JS (jQuery): 

if ($("body").height() > $(window).height()) {
    var top;
    $('#scrolldiv').mouseenter(function() {
        top = $(window).scrollTop();
        $('body').addClass('noscroll').css({top: -top + 'px'});
    }).mouseleave(function() {
        $('body').removeClass('noscroll');
        $(window).scrollTop(top);
    });
}

Проблема переноса текста может быть решена путем помещения всего содержимого в div фиксированной ширины. Есть еще одна ошибка для браузера IE. Если страница имеет выровненный по центру фон, она будет перемещаться влево-вправо при наведении мыши на # scrolldiv

0 голосов
/ 28 декабря 2011

Если вы просто хотите иметь "div" с фиксированной позицией и прокручивать только его, возможно, вы могли бы использовать трюк, подобный:

http://jsfiddle.net/3cpvT/

Прокрутка колесиком мыши и всеми видами клавиш работает как положено. Единственное, что полоса прокрутки находится только на теле документа.

0 голосов
/ 15 апреля 2011

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

Рамки - Справочник W3Schools

...