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

Та же старая проблема, .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 ]

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

Этот код был протестирован в Chrome. http://jsfiddle.net/wmo3o5m8/1/

(function () {
    var down = false, downX, downY;
    document.onmousedown = function (e) {
        downX = e.pageX;
        downY = e.pageY;
        down = true;
    };
    document.onmouseup = function () { down = false; };
    document.onmousemove = function (e) {
        if (down) {
            window.scrollTo(
                window.scrollX + downX - e.pageX,
                window.scrollY + downY - e.pageY
            );
        }
    };
})();
Страница:
...