Встановити положення прокрутки


107

Я намагаюся встановити положення прокрутки на сторінці, щоб скроллер прокручувався до верху.

Я думаю, мені потрібно щось подібне, але це не працює:

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

Якісь ідеї?

Відповіді:




34

Зауважте, що якщо ви хочете прокрутити елемент замість повного вікна, у елементів немає методів scrollToта scrollByметодів. Ти повинен:

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;

Ви також можете імітувати window.scrollToта window.scrollByфункціонувати всі найпопулярніші елементи HTML на веб-сторінці у веб-переглядачах, які не підтримують її на самому собі :

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
});

тож ви можете:

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);

ПРИМІТКА: Object.definePropertyрекомендується, оскільки безпосередньо додавання властивостей prototypeє шкідливою звичкою (коли ви це бачите :-).


Це було корисно, дякую. Але я виявив, що в елементах є метод "scrollTo". Дивіться developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo
Narvalex

@Narvalex ось що говорить другий абзац.
Хорхе Фуентес Гонсалес

Посилання, яке я зазначив, показує, що ці функції вбудовані. Не потрібно визначати властивості вбудованих методів
Narvalex

@Narvalex О, я щойно прочитав "не маю", моя погана. Треба сказати, що тоді не у всіх браузерах є, хоча зараз такий браузер важко знайти (як IE11).
Хорхе Фуентес Гонсалес

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.