Скрытая полоса прокрутки заставляет тело прокручиваться вверх

0

Я заметил, что при попытке скрыть полосу прокрутки с помощью overflow:hidden прокручивает сайт вверху, если этот стиль CSS используется для элементов html и body:

html,body {
    height: 100%;
}

Это код jQuery:

$('#end').click(function(){
        $("html, body").css("overflow", "hidden");
});

Живая демонстрация: http://jsfiddle.net/hYNGn/

Это происходит во всех основных браузерах: Chrome, Firefox, IE9, Opera...

Как избежать такого поведения?

Благодарю.

  • 0
    @epascarello Я говорю о вертикальной прокрутке. Он прокручивает страницу вверх независимо от содержания.
  • 0
    @epascarello на самом деле. На мобильном телефоне (по крайней мере, на iPhone) полоса прокрутки находится над телом и не "съедает" никакого пространства.
Показать ещё 1 комментарий
Теги:
web

5 ответов

2
Лучший ответ

Тело имеет height: 100% но узлы детей заставляют его переполняться. Когда вы устанавливаете переполнение для hidden результата, тело возвращается к высоте: 100% относительно окна, чтобы оно выглядело как свиток.

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

$("html, body").css({
    "overflow": "hidden",
    "height": "auto"
});
Поделиться
  • 0
    Какое решение вы бы предложили тогда? Скрытие полосы прокрутки довольно распространенная работа со слоями и многое другое, используя их на сенсорном устройстве.
1

Только установите тело, чтобы скрыть переполнение:

$('#end').click(function(){
  $("body").css("overflow", "hidden");
});

http://jsfiddle.net/jaap/hYNGn/5/

Поделиться
1

Может быть, это?

http://jsfiddle.net/hYNGn/2/

$('#end').click(function(){
    var thetop = - $(window).scrollTop();
    $("div.demo").css("margin-top",thetop);
    $("html, body").css("overflow", "hidden");
});
Поделиться
  • 0
    Это работает, но ... это больше похоже на чит, чем на правильное решение :)
  • 0
    Это не чит - это правильное решение. Я не понимаю, почему это может быть проблемой: на самом деле, удаляя полосу прокрутки, вы нарушаете положение прокрутки пользователя, потому что рост был уменьшен до высоты окна просмотра. Upvote за усилия.
Показать ещё 3 комментария
0

Лучшим обходным решением вашей проблемы будет перемещение части прокрутки в div вместо этого.

Объявление: переполнение, скрытое до тела

html,body {
 height: 100%;
 overflow: hidden;
}

Объявление:

.demo {
 width: 100%;
 height: 100%;
 overflow: auto;
 position: absolute;
}

И используйте это событие click:

$('#end').click(function(){
 $("div.demo").css("overflow", "hidden");
});
Поделиться
0

попробуй это:

$('#end').click(function(){
        $("html, body").css("overflow", "hidden");
        var bodyElement = $("body");
        bodyElement.scrollTop(bodyElement.height());
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню