Ustaw pozycję przewijania


107

Próbuję ustawić pozycję przewijania na stronie, tak aby rolka była przewijana do samej góry.

Myślę, że potrzebuję czegoś takiego, ale to nie działa:

(function () { alert('hello'); document.body.scrollTop = 0; } ());

Jakieś pomysły?

Odpowiedzi:




34

Zwróć uwagę, że jeśli chcesz przewinąć element zamiast całego okna, elementy nie mają metod scrollToi scrollBy. Powinieneś:

var el = document.getElementById("myel"); // Or whatever method to get the element

// To set the scroll
el.scrollTop = 0;
el.scrollLeft = 0;

// To increment the scroll
el.scrollTop += 100;
el.scrollLeft += 100;

Możesz także naśladować funkcje window.scrollToi window.scrollBydla wszystkich istniejących elementów HTML na stronie w przeglądarkach, które nie obsługują ich natywnie :

Object.defineProperty(HTMLElement.prototype, "scrollTo", {
    value: function(x, y) {
        el.scrollTop = y;
        el.scrollLeft = x;
    },
    enumerable: false
});

Object.defineProperty(HTMLElement.prototype, "scrollBy", {
    value: function(x, y) {
        el.scrollTop += y;
        el.scrollLeft += x;
    },
    enumerable: false
});

więc możesz:

var el = document.getElementById("myel"); // Or whatever method to get the element, again

// To set the scroll
el.scrollTo(0, 0);

// To increment the scroll
el.scrollBy(100, 100);

UWAGA: Object.definePropertyjest zalecane, ponieważ bezpośrednie dodawanie właściwości do tego prototypejest złym nawykiem (kiedy to widzisz :-).


To było pomocne, dzięki. Ale odkryłem, że elementy mają metodę „scrollTo”. Zobacz developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo
Narvalex

@Narvalex tak stwierdza drugi akapit.
Jorge Fuentes González

Odniesienie, które wskazałem, pokazuje, że te funkcje są wbudowane. Nie ma potrzeby definiowania właściwości wbudowanych metod
Narvalex

@Narvalex Och, właśnie przeczytałem „nie mam”, moja wina. Muszę stwierdzić, że nie wszystkie przeglądarki go wtedy mają, choć w dzisiejszych czasach trudno o taką przeglądarkę (jak IE11).
Jorge Fuentes González

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.