Прокрутка позволяет пользователям просматривать веб-страницы/длинные документы слева и справа или вверх и вниз. Это можно сделать, добавив горизонтальные и вертикальные полосы прокрутки в зависимости от содержимого. Размеры полосы прокрутки, такие как высота и ширина, установлены по умолчанию. Однако их можно настроить с помощью связанных с ними методов JavaScript. Как только они могут быть добавлены или установлены в документе, пользователь может легко идентифицировать их с помощью встроенного « прокрутка сверху() ', и ' прокрутка влево() методы.
В этом посте объясняется назначение и функциональность метода «scrollLeft()» в jQuery.
Что такое метод «scrollLeft()» в jQuery?
“ прокрутка влево() ” специально разработан для горизонтальной полосы прокрутки, чтобы установить и получить ее положение в пикселях. Он вычисляет положение полосы прокрутки выбранного элемента HTML. В основном он применяется к элементам div, container и section.
Синтаксис (установить горизонтальное положение полосы прокрутки)
$ ( селектор ) .scrollLeft ( позиция )
Приведенный выше синтаксис принимает целочисленное значение в качестве « позиция », чтобы установить горизонтальное положение полосы прокрутки целевого селектора.
Синтаксис (Получить положение горизонтальной полосы прокрутки)
$ ( селектор ) .scrollLeft ( )
Этот синтаксис возвращает значение аргумента «позиция» селектора в пикселях.
Применим указанный метод практически.
HTML-код
Во-первых, взгляните на указанный HTML-код:
< раздел стиль '=' 'высота: 150 пикселей; ширина: 200 пикселей; поле: авто; граница: 2 пикселя сплошной черный; переполнение: авто;пробел: nowrap;' >
< h2 > Добро пожаловать в Линуксинт ! h2 >
раздел >
< кнопка > Установить положение кнопка >
В приведенных выше строках кода:
- “ <раздел> » содержит раздел внутри HTML-документа, настроенный с помощью атрибута «style».
- Внутри созданного раздела « Тег ” определяет подзаголовок.
- Наконец, « <кнопка> Тег добавляет кнопку.
Примечание: Следуйте указанному HTML-коду во всех примерах этого поста.
Пример 1. Применение метода «scrollLeft()» для установки положения полосы прокрутки (по горизонтали)
В этом примере используется метод «scrollLeft()», чтобы установить полосу прокрутки (горизонтальную) в указанную позицию.
jQuery-код
Следуйте указанному коду jQuery:
< сценарий источник '=' 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > сценарий >< сценарий >
$ ( документ ) .готовый ( функция ( ) {
$ ( 'кнопка' ) .клик ( функция ( ) {
$ ( 'раздел' ) .scrollLeft ( пятьдесят ) ;
} ) ;
} ) ;
сценарий >
В этом фрагменте кода:
- Сначала укажите путь CDN библиотеки jQuery в « <скрипт> ” тег с официального сайта “ https://jquery.com/ » с помощью « источник атрибут.
- Затем второй тег «