На странице динамически размещаются элементы, которые можно скроллить. В определённый момент происходи скролл. Как получить ID или class элемента, который проскроллили?
2 ответа
Используя 3 параметр (useCapture = true) метода addEventListener
, устанавливаем слушателя на все события скролла, а далее просто получаем свойство id
или className
элемента, вызвавшего событие
document.addEventListener('scroll', function(event) {
console.log(event.target.className, event.target.className);
}, true);
<div class="scrol1" id="s1" style="width: 300px; overflow: auto; height: 100px;">
<table>
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jennifer</td>
<td>502-5366</td>
</tr>
</tbody>
<tr>
<td>Jennifer</td>
<td>502-5366</td>
</tr>
<tr>
<td>Jennifer</td>
<td>502-5366</td>
</tr>
<tr>
<td>Jennifer</td>
<td>502-5366</td>
</tr>
<tr>
<td>Jennifer</td>
<td>502-5366</td>
</tr>
<tr>
<td>Jennifer</td>
<td>502-5366</td>
</tr>
</table>
</div>
<div class="scrol2 div2" id="s2" style="width: 300px; overflow: auto; height: 100px;">
<table>
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jennifer</td>
<td>502-5366</td>
</tr>
</tbody>
<tr>
<td>Jennifer</td>
<td>502-5366</td>
</tr>
<tr>
<td>Jennifer</td>
<td>502-5366</td>
</tr>
<tr>
<td>Jennifer</td>
<td>502-5366</td>
</tr>
<tr>
<td>Jennifer</td>
<td>502-5366</td>
</tr>
<tr>
<td>Jennifer</td>
<td>502-5366</td>
</tr>
</table>
</div>
-
Спасибо! Это работает. Может быть у Вас есть мысль как программно проскроллить динамически создаваемый элемент $(".fancybox-slide").animate({ scrollTop: "300px" }); 6 дек 2021 в 15:09
-
если они динамически создаются, то им можно динамически цеплять нужный класс и по нему уже цеплять скролл– Sanya H6 дек 2021 в 15:14
-
При клике на кнопку почему-то не происходит скролл. $(document).on('click', '#id', function(e) { $(".fancybox-slide").animate({ scrollTop: "300px" }); }) 6 дек 2021 в 15:40
ответ на вопрос в комментариях о скролле при нажатии на кнопку
$(document).on("click", "#up", function() {
$(".fancy-box").animate({ scrollTop: "0" });
})
$(document).on("click", "#down", function() {
$(".fancy-box").animate({scrollTop: $("#up").first().position().top }, 2000);
})
.scrollable {
background-color: grey;
height: 500px;
}
.fancy-box {
height: 200px;
overflow: scroll;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fancy-box">
<button id="down">
Scroll To Top
</button>
<div class="scrollable"></div>
<button id="up">
Scroll To Top
</button>
</div>