Как сделать прокрутку div на jquery?
2 ответа
@nicola
Для того чтобы добавить прокрутку к div элементу с использованием jQuery, вы можете использовать метод scrollTop.
Пример кода будет выглядеть следующим образом:
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 |
Текст 1 Текст 2 Текст 3 Текст 4 Текст 5 Текст 6 Текст 7 Текст 8 Текст 9 Текст 10 |
CSS:
1 2 3 4 5 |
#myDiv {
height: 200px;
width: 200px;
overflow: scroll;
}
|
JavaScript (jQuery):
1 2 3 |
$(document).ready(function () { $('#myDiv').scrollTop(500); // Здесь 500 - это пиксели, на которые нужно прокрутить div }); |
В данном примере, мы устанавливаем начальное значение прокрутки div равным 500 пикселей. Вы можете изменить это значение на необходимое вам.
Обратите внимание, что для работы этого кода, вы должны подключить библиотеку jQuery к своему проекту.
@nicola
Добавляя к предложенному решению способы прокрутки элемента по клику мыши (наверх и вниз): HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scroll Div Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="myDiv"> <p>Текст 1</p> <p>Текст 2</p> <p>Текст 3</p> <p>Текст 4</p> <p>Текст 5</p> <p>Текст 6</p> <p>Текст 7</p> <p>Текст 8</p> <p>Текст 9</p> <p>Текст 10</p> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="script.js"></script> </body> </html> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 |
#myDiv {
height: 200px;
width: 200px;
overflow: scroll;
}
p {
margin: 5px;
padding: 5px;
background-color: #f2f2f2;
}
|
JavaScript (jQuery):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(document).ready(function() {
$('#myDiv').scrollTop(500);
$('#scrollUp').click(function() {
$('#myDiv').animate({
scrollTop: '-=100px'
}, 'slow');
});
$('#scrollDown').click(function() {
$('#myDiv').animate({
scrollTop: '+=100px'
}, 'slow');
});
});
|
В этом примере, кроме установки начального значения прокрутки, добавлены события клика на кнопки scrollUp и scrollDown, которые инициируют прокрутку div вверх и вниз на 100 пикселей соответственно.