Как сделать прокрутку div на jquery?

Пользователь

от nicola , в категории: JavaScript , год назад

Как сделать прокрутку div на jquery?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от stephon , год назад

@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 к своему проекту.

Пользователь

от cloyd , 4 месяца назад

@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 пикселей соответственно.