在 div 内滚动 onclick答案

【问题标题】：Scroll inside div onclick在 div 内滚动 onclick
【发布时间】：2020-01-02 15:24:33
【问题描述】：

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

点击<i>后如何滚动10px？ ScrollBy 函数只适用于 window，但我需要同样的 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>

.sticky {
    top: 130px;
    overflow-x: hidden;
    overflow-y: scroll;
}

【问题讨论】：

标签： javascript jquery html scroll

【解决方案1】：

首先，在jQuery中scrollTop()是一个方法，所以你需要调用它并提供新的滚动位置。其次，您需要在.sticky 上设置一个height，以便它设置一个范围以允许发生溢出。最后，您需要将上/下标签放在.sticky 元素之外，否则它们会滚动到视图之外。

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

var $sticky = $('.sticky');

$('.scroll').on('click', function() {
  $sticky.scrollTop($sticky.scrollTop() + $(this).data('inc'));
});

.sticky {
  top: 130 px;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 150px;
}
.scroll {
  user-select: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<i class="scroll fa fa-angle-up" data-inc="-10">Up</i>
<i class="scroll fa fa-angle-down" data-inc="10">Down</i>
<div class="sticky">
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
</div>

【讨论】：

【解决方案2】：

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;
});

https://jsfiddle.net/8af1e7pr/

【讨论】：

【解决方案3】：

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

注意：Rory McCrossan 的回答也完全有效，重点是区分 jQuery 的选择（这是一个具有 jQuery 功能的 Javascript 对象，例如 scrollTop()）和 DOM 对象（您可以使用 vanilla JS querySelector 获取它们，并且包含在 jQuery 的选择中）如果您在其上修改一些属性，如 scrollTop，您将立即看到更改。

function goUp(){
    $('.sticky')[0].scrollTop += 10;
}

function goDown(){
    $('.sticky')[0].scrollTop -= 10;
}

html, body {
    height: 90%;
}

.sticky {
    height: 90%;
    top: 130px;
    overflow-x: hidden;
    overflow-y: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sticky">
    <!-- ... -->
    <i onclick="goUp()" class="fa fa-angle-up">test up</i><br>
    <i onclick="goDown()" class="fa fa-angle-down">test down</i><br>
    <i onclick="goUp()" class="fa fa-angle-up">test up</i><br>
    <i onclick="goDown()" class="fa fa-angle-down">test down</i><br>
    <i onclick="goUp()" class="fa fa-angle-up">test up</i><br>
    <i onclick="goDown()" class="fa fa-angle-down">test down</i><br>
    <i onclick="goUp()" class="fa fa-angle-up">test up</i><br>
    <i onclick="goDown()" class="fa fa-angle-down">test down</i><br>
    <i onclick="goUp()" class="fa fa-angle-up">test up</i><br>
    <i onclick="goDown()" class="fa fa-angle-down">test down</i><br>
    <i onclick="goUp()" class="fa fa-angle-up">test up</i><br>
    <i onclick="goDown()" class="fa fa-angle-down">test down</i><br>
    <i onclick="goUp()" class="fa fa-angle-up">test up</i><br>
    <i onclick="goDown()" class="fa fa-angle-down">test down</i><br>
    <i onclick="goUp()" class="fa fa-angle-up">test up</i><br>
    <i onclick="goDown()" class="fa fa-angle-down">test down</i><br>
    <i onclick="goUp()" class="fa fa-angle-up">test up</i><br>
    <i onclick="goDown()" class="fa fa-angle-down">test down</i><br>
    <i onclick="goUp()" class="fa fa-angle-up">test up</i><br>
    <i onclick="goDown()" class="fa fa-angle-down">test down</i><br>
    <i onclick="goUp()" class="fa fa-angle-up">test up</i><br>
    <i onclick="goDown()" class="fa fa-angle-down">test down</i><br>
    <i onclick="goUp()" class="fa fa-angle-up">test up</i><br>
    <i onclick="goDown()" class="fa fa-angle-down">test down</i><br>
    <i onclick="goUp()" class="fa fa-angle-up">test up</i><br>
    <i onclick="goDown()" class="fa fa-angle-down">test down</i><br>
    <i onclick="goUp()" class="fa fa-angle-up">test up</i><br>
    <i onclick="goDown()" class="fa fa-angle-down">test down</i><br>
    <i onclick="goUp()" class="fa fa-angle-up">test up</i><br>
    <i onclick="goDown()" class="fa fa-angle-down">test down</i><br>
    <i onclick="goUp()" class="fa fa-angle-up">test up</i><br>
    <i onclick="goDown()" class="fa fa-angle-down">test down</i><br>
    <!-- ... -->
</div>

【讨论】：