scrollLeft()
27
посл. ред.
12.08.2016
Метод scrollLeft() изменяет горизонтальную прокрутку всех элементов выборки или возвращает значение прокрутки первого элемента.
Горизонтальная прокрутка - это ширина той области элемента, которая скрыта слева из-за прокрутки, в пикселях.
Варианты использования
jQ_object.scrollLeft() => Number- Возвращает величину горизонтальной прокрутки первого элемента выборки. Если ползунок полосы прокрутки находится в крайнем левом положении или элемент не имеет горизонтальной полосы прокрутки, тогда возвращается
0. jQ_object.scrollLeft(значение) => jQuery- Изменяет величину горизонтальной прокрутки всех элементов выборки на указанное значение.
Примеры
<html>
<head>
<title>Работа с элементами DOM</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
ul {
width: 200px;
height: 150px;
border: 2px solid #789;
overflow: auto;
}
li {
width: 300px;
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, aliquid corporis dolor sed quod nihil nam sint veniam, laborum fuga deleniti, est mollitia blanditiis sit placeat repellendus suscipit illum odit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, ut odit labore. Cum excepturi maxime nostrum nobis delectus totam vel, fugiat molestias facere ipsam, dolores adipisci praesentium pariatur amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis perspiciatis, totam dicta placeat ratione dolor numquam labore, esse dolorum autem ad sapiente, at voluptate. Odio minus obcaecati pariatur officiis molestias.</li>
</ul>
<button onclick="$('ul').scrollLeft(0)">В начало</button>
</body>
</html>
<script>
$('ul').scrollLeft(100);
</script>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, aliquid corporis dolor sed quod nihil nam sint veniam, laborum fuga deleniti, est mollitia blanditiis sit placeat repellendus suscipit illum odit.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ipsa, ut odit labore. Cum excepturi maxime nostrum nobis delectus totam vel, fugiat molestias facere ipsam, dolores adipisci praesentium pariatur amet.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis perspiciatis, totam dicta placeat ratione dolor numquam labore, esse dolorum autem ad sapiente, at voluptate. Odio minus obcaecati pariatur officiis molestias.