Та же старая проблема, .scrollTop (0) не работает в Chrome и Safari - PullRequest
Новая
       47

Та же старая проблема, .scrollTop (0) не работает в Chrome и Safari

7 голосов
/ 16 февраля 2012

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

Я разработал страницу, которая имеет несколько фиксированных элементов, покрывающих страницу, и использует html5 / css3, чтобы создать чистую «маску» над основным документом, позволяя тем самым полосе прокрутки тела сохранять неподвижность.прокрутите основной контент.

В Firefox и т. е. (bleh), scrollTop (0) работает отлично.Однако, как указано в вопросе, в моих любимых браузерах не так много.

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

$("body,html,document").each(function(){ console.log($(this).scrollTop()); });

Результаты не были приятными, это говорит мне, что scrolltop уже равен 0 и, следовательно, даже не пытается scrollTop, или, по крайней мере, это то, что я до сих пор «думаю».

И прежде чем вы спросите, я сделал этоВызов консоли для каждого из этих 3 элементов, поскольку скролттоп документа должен быть включен в один из этих элементов (я бы подумал, что это тело, но, как и в случае с т. е. вам тоже нужно вызывать html)

Есть идеи по поводу идей?

К вашему сведению, это может быть странностью css (хотя, как это работает в IE, а не в chrome, я действительно не могу понять), но я уже попробовал следующее с отрицательными результатами: 

$(window).scrollTop(0);
$(document).scrollTop(0);
$("html").scrollTop(0);
$("body").scrollTop(0);
window.scroll(0,0);
$("body,html,document").scrollTop(0);
$("body,html").scrollTop(0);

Что, я полагаю, расширяет мой вопрос, это проблема css?У меня нет внешней ссылки, и код слишком длинный (сделан с использованием CI view Partials), чтобы опубликовать все это, но чтобы УТОЧНИТЬ то, что я сделал:

  • Исправлены верхний и нижний колонтитулы и боковая панель.оставляя контент для прокрутки с помощью documentmet scrollbar
  • реализовано очень мало javascript или jquery, почти 0 пользовательских css вне фиксированной позиции предоплаченных элементов
  • «контент» ajax используется в jQuery.load функция, основанная на элементах списка, которые нажимаются в навигаторе боковой панели

temp Fiddle больше не работает

Ответы [ 11 ]

18 голосов
/ 10 января 2014

У меня была такая же проблема. Если я поставлю 

$(window).scrollTop(0);

в обработчике документов, он не работал; но если я протестирую его на панели консоли javascript инструментария разработчика Chrome, это сработает! Единственная разница заключалась в времени выполнения скрипта. Поэтому я попытался 

window.setTimeout(function() {
    $(window).scrollTop(0); 
}, 0);

и это сработало. Установка задержки больше 0 необязательна, хотя это тоже сработало. Это не вина JQuery, потому что то же самое с 

window.scrollTo(0, 0);  window.scroll(0, 0);

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

9 голосов
/ 25 сентября 2012

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

    $('#element_id').stop().animate({ scrollTop: 0 }, 500);

Кажется, это ведет себя лучше, чем .scrollTop(0).

8 голосов
/ 16 февраля 2012

Проблема с CSS. В частности, правила, которые я включил ниже. 

html, body {
    overflow-x: hidden;
    overflow-y: auto;
}

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

См .: http://jsfiddle.net/jNWUm/23/.

3 голосов
/ 16 февраля 2012

Я только что проверил следующее в IE8 и Chrome, и оба работают: 

$(window).scrollTop(0)
1 голос
/ 15 августа 2016

У меня была такая же проблема с прокруткой в ​​chrome. Причина была height:100% стиль в body и html. См. Этот ответ

1 голос
/ 22 апреля 2016

К вашему сведению, если не в верхнем теле, то есть в iframe, просто попробуйте window.top.scrollTo (0,0);

1 голос
/ 03 марта 2013

Также проверьте этот ответ: scrolltop не работает на Android - кажется, лучше всего работает, когда переполнение установлено на видимое и положение на относительное - но ymmv. Вы можете найти эти полезные ... 

function repeatMeOnMouseDown() // for smooth scrolling
{
    var $newTop = $('#element_id').position().top + ($goingUp ? -20 : 20);
    $('#element_id').animate({top: $newTop}, 20, repeatMeOnMouseDown); 
}

// these should work
$('#element_id').animate({top: -200}, 200); // scroll down
$('#element_id').animate({top: 0}, 200); // scroll back up

// DON'T DO THIS - Offsets don't work with top like they do with scrollTop 
$('#element_id').animate({top: ("-= " + 200)}, 200);

// and when you get tired of fighting to do smooth animation 
// on different browsers (some buggy!), just use css and move on
function singleClick($goingUp)
{
   var $newTop = $('#element_id').position().top + ($goingUp ? -200 : 200);
    $('#element_id').css({top: $newTop}, 20); 
}
0 голосов
/ 02 марта 2019

У меня была эта проблема на MacOS.Я попытался вставить: 

$(window).scrollTop(0);
document.body.scrollTop = document.documentElement.scrollTop = 0;

в $(window).load, и он все еще не работал.

Затем я попытался использовать какой-то трюк: 

$('body')
  .css('position', 'fixed')
  .delay(200)
  .promise()
  .done(function() {
    $('body').css('position', 'relative');
  });

и все работало нормально!Фиксированный тип позиции отделяет <body> от <html>, что фактически устанавливает нулевую позицию прокрутки окна.Затем с задержкой в ​​200 миллисекунд (просто для большей безопасности) я положил обратно position: relative.

Надеюсь, это поможет.Спасибо.

0 голосов
/ 27 ноября 2017

$('#element-id').prop('scrollTop', 0); тоже надо делать.

0 голосов
/ 25 ноября 2015

Это нормальное поведение, когда в вашем css вы объявляете overflow: hidden для html или body элементов dom, как вы можете прочитать в документации jQuery API :

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

При overflow: hidden полоса прокрутки не видна , следовательноэлемент не прокручивается, поэтому в каждом (интересно) браузере, который вы будете использовать, число будет равно 0.

Страница:
...