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

Question

Я заметил, что если пытаться скрыть полосу прокрутки с помощью 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 ...

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

Спасибо.

Answer 1

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

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

$("html, body").css({ 
    "overflow": "hidden", 
    "height": "auto" 
}); 

Answer 2

Возможно, это?

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

$('#end').click(function(){ 
    var thetop = - $(window).scrollTop(); 
    $("div.demo").css("margin-top",thetop); 
    $("html, body").css("overflow", "hidden"); 
}); 

Answer 3

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

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

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

Answer 4

попробовать это:

$('#end').click(function(){ 
     $("html, body").css("overflow", "hidden"); 
     var bodyElement = $("body"); 
     bodyElement.scrollTop(bodyElement.height()); 
}); 

Answer 5

Лучшим решением проблемы будет ваша перемещающая часть прокрутки в div.

объявления: переполнение скрытый в теле

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

объявления этого:

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

И использовать этот щелчок событие:

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