Разное

Прокрутка страницы javascript: Перемещение окна и прокрутка страницы в JavaScript

16.06.2023

.scrollTo() — JavaScript — Дока

  1. Кратко
  2. Как пишется
  3. Как понять
  4. На практике
    1. Дока Дог советует

Кратко

Скопировано

Метод scrollTo() позволяет программно прокрутить элемент до некоторой точки координат на странице.

Как пишется

Скопировано

window.scrollTo(x, y)
          window.scrollTo(x, y)

Где x и y — это координаты левого верхнего угла экрана.

Для скролла внутри элемента (например, в <div>) нужно сначала получить этот элемент. Прокрутим первый на странице <div> на 100 пикселей вниз (этот блок должен содержать достаточно контента, чтобы появился скроллбар):

const div = document.querySelector('div')div.scrollTo(0, 100)
          const div = document.querySelector('div')
div.scrollTo(0, 100)

Вместо координат в scrollTo() можно передать объект с тремя параметрами:

  • top задаёт количество пикселей для прокрутки по оси Y;
  • left то же самое, но по оси X;
  • behavior определяет поведение прокрутки. По умолчанию резкое auto
    , но можно указать плавный smooth.
window.scrollTo({  top: 100,  left: 0,  behavior: 'smooth'})
          window.scrollTo({
  top: 100,
  left: 0,
  behavior: 'smooth'
})

Как понять

Скопировано

scrollTo() необходим в случае, когда прокрутку нужно совершить до определённых координат на экране. В случае прокрутки относительно текущего положения лучше воспользоваться scrollBy(), а в случае прокрутки до конкретного элемента — методом scrollIntoView().

На практике

Скопировано

Дока Дог советует

Скопировано

🛠 Прокрутка на определённые координаты полезна, когда вёрстка страницы или элемента одинакова. Это сложно гарантировать в реальном мире, где сайт пытается адаптироваться под разрешение экрана каждого пользователя. Но рассмотрим пример из идеальной вселенной:

Открыть демо в новой вкладке

Во вселенной, где адаптивный дизайн используется везде — используют scrollBy() или scrollIntoView() 😎

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

.scrollIntoView()

ctrl + alt + ←

→

.classList

ctrl + alt + →

Отслеживание прокрутки · Bootstrap v5.2

Как это устроено

Scrollspy переключает класс .active для элементов привязки (<a>), когда элемент с id, на который ссылается href прокручивается в поле зрения. Scrollspy лучше всего использовать вместе с Bootstrap компонент навигации или группа списка, но он также будет работать с любыми якорными элементами на текущей странице. Вот как это работает.

  • Для запуска scrollspy требуется две вещи: навигация, группа списков или простой набор ссылок, а также прокручиваемый контейнер. Прокручиваемый контейнер может быть <body> или пользовательским элементом с установленными height и overflow-y: scroll.

  • В прокручиваемом контейнере добавьте data-bs-spy="scroll" и data-bs-target="#navId", где navId — это уникальный id соответствующей навигации. Не забудьте также включить tabindex="0", чтобы обеспечить доступ с клавиатуры.

  • Когда вы прокручиваете «шпионский» контейнер, класс .active добавляется и удаляется из якорных ссылок в соответствующей навигации. Ссылки должны иметь разрешимые цели

    id, в противном случае они игнорируются. Например, <a href="#home">Главная</a> должна соответствовать чему-то в DOM, например, <div></div>

  • Целевые элементы, которые не видны, будут игнорироваться. Смотрите раздел Невидимые элементы ниже.

Примеры

Панель навигации

Прокрутите область под панелью навигации и посмотрите, как меняется активный класс. Откройте раскрывающееся меню и посмотрите, как будут выделены элементы раскрывающегося списка.

<nav>
  <a href="#">Панель навигации</a>
  <ul>
    <li>
      <a href="#scrollspyHeading1">Первый</a>
    </li>
    <li>
      <a href="#scrollspyHeading2">Второй</a>
    </li>
    <li>
      <a data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Выпадающий список</a>
      <ul>
        <li><a href="#scrollspyHeading3">Третий</a></li>
        <li><a href="#scrollspyHeading4">Четвертый</a></li>
        <li><hr></li>
        <li><a href="#scrollspyHeading5">Пятый</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
  <h5>Первый заголовок</h5>
  <p>.
 
 ..</p>
  <h5>Второй заголовок</h5>
  <p>...</p>
  <h5>Третий заголовок</h5>
  <p>...</p>
  <h5>Четвертый заголовок</h5>
  <p>...</p>
  <h5>Пятый заголовок</h5>
  <p>...</p>
</div>

Вложенная навигация

Отслеживание прокрутки также работает с вложенными

.nav. Если вложенный .nav имеет значение .active, его родители также будут .active. Прокрутите область рядом с панелью навигации и посмотрите, как меняется активный класс.

<div>
  <div>
    <nav>
      <nav>
        <a href="#item-1">Элемент 1</a>
        <nav>
          <a href="#item-1-1">Элемент 1-1</a>
          <a href="#item-1-2">Элемент 1-2</a>
        </nav>
        <a href="#item-2">Элемент 2</a>
        <a href="#item-3">Элемент 3</a>
        <nav>
          <a href="#item-3-1">Элемент 3-1</a>
          <a href="#item-3-2">Элемент 3-2</a>
        </nav>
      </nav>
    </nav>
  </div>
  <div>
    <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" tabindex="0">
      <div>
        <h5>Элемент 1</h5>
        <p>.
 
 ..</p>
      </div>
      <div>
        <h5>Элемент 1-1</h5>
        <p>...</p>
      </div>
      <div>
        <h5>Элемент 1-2</h5>
        <p>...</p>
      </div>
      <div>
        <h5>Элемент 2</h5>
        <p>...</p>
      </div>
      <div>
        <h5>Элемент 3</h5>
        <p>...</p>
      </div>
      <div>
        <h5>Элемент 3-1</h5>
        <p>...</p>
      </div>
      <div>
        <h5>Элемент 3-2</h5>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

Группа списка

Отслеживание прокрутки также работает с .list-group. Прокрутите область рядом с группой списка и посмотрите, как меняется активный класс.

Элемент 1 Элемент 2 Элемент 3 Элемент 4

<div>
  <div>
    <div>
      <a href="#list-item-1">Элемент 1</a>
      <a href="#list-item-2">Элемент 2</a>
      <a href="#list-item-3">Элемент 3</a>
      <a href="#list-item-4">Элемент 4</a>
    </div>
  </div>
  <div>
    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" tabindex="0">
      <h5>Элемент 1</h5>
      <p>.
 
 ..</p>
      <h5>Элемент 2</h5>
      <p>...</p>
      <h5>Элемент 3</h5>
      <p>...</p>
      <h5>Элемент 4</h5>
      <p>...</p>
    </div>
  </div>
</div>

Простые якоря

Scrollspy не ограничивается компонентами навигации и группами списков, поэтому он будет работать с любыми якорными элементами <a> в текущем документе. Прокрутите область и посмотрите, как изменится класс .active.

Элемент 1 Элемент 2 Элемент 3 Элемент 4 Элемент 5

<div>
  <div>
    <div>
      <a href="#simple-list-item-1">Элемент 1</a>
      <a href="#simple-list-item-2">Элемент 2</a>
      <a href="#simple-list-item-3">Элемент 3</a>
      <a href="#simple-list-item-4">Элемент 4</a>
      <a href="#simple-list-item-5">Элемент 5</a>
    </div>
  </div>
  <div>
    <div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" tabindex="0">
      <h5>Элемент 1</h5>
      <p>.
 
 ..</p>
      <h5>Элемент 2</h5>
      <p>...</p>
      <h5>Элемент 3</h5>
      <p>...</p>
      <h5>Элемент 4</h5>
      <p>...</p>
      <h5>Элемент 5</h5>
      <p>...</p>
    </div>
  </div>
</div>

Невидимые элементы

Невидимые целевые элементы будут игнорироваться, а соответствующие им элементы навигации не получат класс .active. Экземпляры Scrollspy, инициализированные в невидимой оболочке, будут игнорировать все целевые элементы. Используйте метод refresh для проверки наблюдаемых элементов, как только оболочка станет видимой.

document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
  el.addEventListener('shown.bs.tab', () => {
    const target = el.getAttribute('data-bs-target')
    const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
    bootstrap.
 
 ScrollSpy.getOrCreateInstance(scrollElem).refresh()
  })
})

Использование

Через атрибуты данных

Чтобы легко добавить поведение прокрутки в навигацию верхней панели, добавьте data-bs-spy="scroll" к элементу, за которым вы хотите следить (чаще всего это будет <body>). Затем добавьте атрибут data-bs-target с id или именем класса родительского элемента любого компонента Bootstrap .nav.

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div>
    <ul role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Через JavaScript 

const scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

Опции

Поскольку параметры можно передавать через атрибуты данных или JavaScript, вы можете добавить имя параметра к data-bs-, как в data-bs-animation="{value}". Обязательно измените тип регистра имени параметра с “camelCase” на “kebab-case” при передаче параметров через атрибуты данных. Например, используйте data-bs-custom-class="beautifier" вместо data-bs-customClass="beautifier".

Начиная с Bootstrap 5.2.0, все компоненты поддерживают экспериментальный зарезервированный атрибут данных data-bs-config, который может содержать простую конфигурацию компонента в виде строки JSON. Когда элемент имеет атрибуты data-bs-config='{"delay":0, "title":123}' и data-bs-title="456", окончательное значение title будет 456, а отдельные атрибуты данных переопределяют значения, указанные в data-bs-config. Кроме того, существующие атрибуты данных могут содержать значения JSON, такие как data-bs-delay='{"show":0,"hide":150}'.

НазваниеТипПо умолчаниюОписание
rootMarginstring0px 0px -25%Intersection Observer rootMargin допустимые единицы измерения при расчете положения прокрутки.
smoothScrollbooleanfalseВключает плавную прокрутку, когда пользователь нажимает на ссылку, которая ссылается на наблюдаемые объекты ScrollSpy.
targetstring | jQuery object | DOM элементУказывает элемент для применения плагина Scrollspy.
thresholdarray[0.1, 0.5, 1]IntersectionObserver threshold допустимый ввод при вычислении положения прокрутки.

Устаревшие опции

Вплоть до версии 5.1.3 мы использовали параметры offset и method, которые теперь устарели и заменены на rootMargin. Чтобы сохранить обратную совместимость, мы продолжим синтаксический анализ заданного offset до rootMargin, но эта функция будет удалена в v6.

Методы

МетодОписание
disposeУничтожает scrollspy элемента. (Удаляет сохраненные данные в элементе DOM).
getInstanceСтатический метод для получения экземпляра scrollspy, связанного с элементом DOM.
getOrCreateInstanceСтатический метод для получения экземпляра scrollspy, связанного с элементом DOM, или для создания нового экземпляра, если он не был инициализирован.
refreshПри добавлении или удалении элементов в DOM вам необходимо вызвать метод обновления.

Вот пример использования метода обновления:

const dataSpyList = document.querySelectorAll('[data-bs-spy="scroll"]')
dataSpyList.forEach(dataSpyEl => {
  bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh()
})

События

СобытиеОписание
activate.bs.scrollspyЭто событие срабатывает на элементе прокрутки всякий раз, когда якорь активируется scrollspy.
const firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
  // сделайте что-нибудь...
})

JavaScript Прокрутка вверх страницы с плавающей кнопкой — CodeHim

Асиф Могол

Плавающая кнопка прокрутки на ванильный JavaScript к началу страницы, позволяющая пользователям плавно переходить к началу страницы при нажатии на нее. Плагин создает красивую плавающую кнопку со стрелкой внизу страницы. После прокрутки страницы кнопка исчезает. После нажатия он исчезает, и страница плавно прокручивается вверх.

Обзор плагина

Плагин: scrolltotop_arrow_js
Автор: Фабиан Линс
Лицензия: Лицензия Массачусетского технологического института
Опубликовано: 28 марта 2023 г.
Репозиторий: Форк на GitHub
Зависимости: Внешняя библиотека не требуется!
Тип файла: zip-архив (HTML, CSS и JavaScript)
Размер упаковки: 6,40 КБ

Скачать демоверсию

Как заставить JavaScript прокручивать кнопку вверх страницы

1. Создайте элемент div со следующим упомянутым именем класса. Это будет работать как плавающая кнопка «Вверх».

    <дел>

2. После этого стилизуйте его с помощью CSS, чтобы изменить его внешний вид.

Только экран @media и (max-width: 1023px) {
  #scrolltotop_parent {
    внизу: 25px !важно;
    справа: 25px !важно;
  }
}
#scrolltotop_parent {
  фон: #006f9e;
  курсор: указатель;
  ширина: 50 пикселей;
  высота: 50 пикселей;
  положение: фиксированное;
  внизу: 50 пикселей;
  справа: 50 пикселей;
  z-индекс: 1004 !важно;
}
#scrolltotop_parent:наведите {
  непрозрачность: 0,7;
  переход: 0,1 с;
}
. scrolltotop_circle {
  радиус границы: 50%;
}
.scrolltotop_round_corners {
  радиус границы: 5px;
}
.scrolltotop_fadeout {
  непрозрачность: 0 !важно;
  переход: 0,5 с;
  видимость: скрытая;
}
.scrolltotop_fadein {
  непрозрачность: 1;
  переход: 0,5 с;
}
#scrolltotop_arrow {
  ширина: 0 пикселей;
  высота: 0px;
  граница слева: 12px сплошная прозрачная;
  граница справа: 12px сплошная прозрачная;
  нижняя граница: сплошной белый 12 пикселей;
  поле: 0 авто;
  поле сверху: 19пкс;
}
#scrolltotop_arrow:фокус {
  непрозрачность: 0,7;
  переход: 0,1 с;
}

3. После создания плавающей кнопки включите прокрутку в начало файла JavaScript в HTML-документ.

4. Убедитесь, что в вашем документе достаточно содержимого для прокрутки. Если нет, вы можете использовать поля с образцами цветов для целей тестирования.

  <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>

5. Чтобы изменить положение прокрутки для всплывающей кнопки возврата наверх, когда она должна исчезать, отредактируйте файл scrolltotop_arrow_code и обновите следующую переменную. По умолчанию: 200, Тип: Число,

scrolltotop_fadein_start_position = 300;

6. Решите, будет ли отображаться круглая кнопка «назад-вверх» или прямоугольная с закругленными углами. По умолчанию: true, тип: Boolean. (ложь для прямоугольной кнопки).

 scrolltotop_circle_mode = истина;

Связанные фрагменты кода:

Определение размеров браузера и смещения прокрутки документа

Определение размеров браузера и смещения прокрутки документа

Прежде чем мы официально выступим, важно, чтобы все сначала понимает, как определить размеры браузера и документировать координаты смещения прокрутки. Только тогда можно будет правильно позиционировать элемент статически на странице. Пройдемся по техникам для обоих.

— Определение размеров браузера

Размеры браузера относятся к его физической ширине и высота и представлена ​​в JavaScript по-разному, в зависимости от того, браузером является Firefox (включая NS6) или IE4+, следующие два свойства задействовано:

свойства Firefox/ NS6 для определения браузера размер
Недвижимость Описание
окно.внутренняя ширина Возвращает физическую ширину экран браузера
window.innerHeight Возвращает физическую высоту экран браузера

Вот эквивалентные свойства IE 4+:

Свойства IE 4+ для определения браузера размер
Свойство (IE 4+) Описание
document. body.clientWidth Возвращает физическую ширину экран браузера
document.body.clientHeight Возвращает физическую высоту экран браузера

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

Пример (попробуйте изменить размер и перезагрузить браузер):

Достаточно просто, правда? Давайте двигаться дальше.

-Определение координат смещения прокрутки документа (DSOC)

Это ключ к возможности всегда сохранять элемент видно на экране браузера клиента, зная смещение прокрутки координаты документа (DSOC). Хорошо, термин не совсем я объяснительный, так что некоторая рука держания в порядке.

Всякий раз, когда вы просматриваете веб-страницу, вы на самом деле просматриваете два вещи- 1) окно браузера и 2) документ, содержащийся внутри окно:

Чаще всего документ имеет больший размер чем окно (как по ширине, так и по высоте), и, таким образом, причина, по которой полосы прокрутки в вашем браузере. DSOC относится к точке в документе который в данный момент отображается в верхнем левом углу окна, в x, y форма. Графически это выглядит так:

Таким образом, в приведенном выше примере и в его текущем состоянии DSOC может быть чем-то вроде (0, 80). Если бы мы прокручивали документ вниз 100 пикселей, вместо этого DSOC будет читать (0, 180).

Вот свойства для получения DSOC, а именно: опять же, по-разному в Firefox и IE4+.

Свойства Firefox/ NS6+ для определения DSOC
Недвижимость Описание
окно.pageXOffset Возвращает координату x DSOC
window.pageYOffset Возвращает координату Y DSOC

.
IE 4+ свойства для определения DSOC
Недвижимость Описание
document. body.scrollLeft Возвращает координату x DSOC
document.body.scrollTop Возвращает координату Y DSOC

Чтобы лучше объяснить и лучше продемонстрировать DSOC, мы поместили вместе живой пример. Нажмите здесь , затем посмотрите на левый верхний угол этой страницы. Отображаемые значения являются координаты смещения прокрутки текущего документа. Попробуйте прокрутить страницу и обратите внимание, как меняются значения.

Тестирование

Document.body и тип документа

Хорошо, ловушка IE, которую я должен упомянуть сейчас. Если на вашей странице используется тип документа в в верхней части страницы, из-за чего IE6 переходит в режим, соответствующий стандартам (например: XHTML strict), способ доступа к свойствам DSOC в IE6 меняется, а именно, из document.