Javascript 在div onclick内滚动

.sticky

块包含大量数据和滚动条。如果我按下，我想在每次点击时将滚动条移动10像素，但它不起作用

单击

后如何滚动10px？

ScrollBy

功能仅适用于

窗口

，但对于

div

，我需要相同的功能，是否可能

<div class="sticky">
    <!-- ... -->
    <i onclick="$('.sticky').scrollTop += 10" class="fa fa-angle-up"></i>
    <i onclick="$('.sticky').scrollTop -= 10" class="fa fa-angle-down"></i>
    <!-- ... -->
</div>

---

首先，在jQuery中，

scrollTop（）

是一个方法，因此需要调用它并提供滚动到的新位置。其次，您需要在

.sticky

上设置

高度

，以使其具有允许溢出发生的范围。最后，您需要将向上/向下标签放在

.sticky

元素之外，否则它们将滚动到视图之外

使用不引人注目的事件处理程序而不是内联事件处理程序也是更好的做法。试试这个：

var$sticky=$（'.sticky'）；
$（'.scroll'）。在（'click'，function（）上{
$sticky.scrollTop（$sticky.scrollTop（）+$（this.data（'inc'））；
});
.sticky{
顶部：130像素；
溢出x：隐藏；
溢出y：滚动；
高度：150像素；
}
.卷轴{
用户选择：无；
}

向上的
向下
同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

首先，在jQuery中，scrollTop（）是一个方法，因此需要调用它并提供滚动到的新位置。其次，您需要在
.sticky
上设置
高度
，以使其具有允许溢出发生的范围。最后，您需要将向上/向下标签放在
.sticky
元素之外，否则它们将滚动到视图之外

使用不引人注目的事件处理程序而不是内联事件处理程序也是更好的做法。试试这个：


var$sticky=$（'.sticky'）；
$（'.scroll'）。在（'click'，function（）上{
$sticky.scrollTop（$sticky.scrollTop（）+$（this.data（'inc'））；
});
.sticky{
顶部：130像素；
溢出x：隐藏；
溢出y：滚动；
高度：150像素；
}
.卷轴{
用户选择：无；
}

向上的
向下
同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑

同侧眼睑



修改jQuery选择对象的属性时，scrollTop不起作用；它在DOM对象上使用时有效。您可以在jQuery选择中使用
[0]
来获得它。请注意，如果jQuery选择返回多个DOM对象，它将仅对第一个选定项起作用

注意：Rory McCrossan的回答也完全正确，重要的一点是区分jQuery的选择（这是一个Javascript对象，具有jQuery的函数，如
scrollTop（）
）和DOM对象（您可以使用vanilla JS
querySelector
，并包含在jQuery的选择中）如果您修改一些属性，如
scrollTop
，您将立即看到更改


函数goUp（）{
$（'.sticky'）[0].scrollTop+=10；
}
函数仓库（）{
$（'.sticky'）[0].scrollTop-=10；
}
html，正文{
身高：90%；
}
.粘的{
身高：90%；
顶部：130像素；
溢出x：隐藏；
溢出y：滚动；
}

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

scrollTop
在修改jQuery选择对象的属性时不起作用；它在DOM对象上使用时起作用。您可以使用jQuery选择上的
[0]
来获取它。请注意，如果jQuery选择返回多个DOM对象，它将仅在第一个选定项上起作用

注意：Rory McCrossan的回答也完全正确，重要的一点是区分jQuery的选择（这是一个Javascript对象，具有jQuery的函数，如
scrollTop（）
）和DOM对象（您可以使用vanilla JS
querySelector
，并包含在jQuery的选择中）如果您修改一些属性，如
scrollTop
，您将立即看到更改


函数goUp（）{
$（'.sticky'）[0].scrollTop+=10；
}
函数仓库（）{
$（'.sticky'）[0].scrollTop-=10；
}
html，正文{
身高：90%；
}
.粘的{
身高：90%；
顶部：130像素；
溢出x：隐藏；
溢出y：滚动；
}

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试

进行测试

向下测试


let objDiv = document.querySelector(".sticky");

let up = document.getElementById('up');
up.addEventListener('click',function () {
    objDiv.scrollTop -= 10;
});

let down = document.getElementById('down');
down.addEventListener('click',function () {
    objDiv.scrollTop += 10;
});