javascript - 当我只对一个 div 使用 jQuery scrollLeft 时，整个页面在顶部滚动

Question

我想要一个 div，我可以通过单击此 div 外部的链接来水平滚动它。 (一个用于向左滚动，一个用于向右滚动)。

我使用了 jQuery animate 和 scrollLeft。一切看起来都不错，但唯一的问题是:当我单击链接以使用 div 进行滚动时，整个页面也在顶部滚动。我在这里找到了一些类似的主题，但没有解决方案可以应用于我的问题(或者我可以应用于我的问题)。

请体谅，这是我的第一个问题。 :-)

谢谢

function move_right() {
    var current = $('.thumbnail-scroll').scrollLeft();
    var maximal = document.getElementById("thumbnail-scroll").scrollWidth;
    var visible = document.getElementById("thumbnail-scroll").offsetWidth;
    var move;

    if ((current + visible) < maximal) {
        $('.thumbnail-scroll').animate({
            scrollLeft: '+=' + 470
        }, 1000);
    }
}

function move_left() {
    var current = $('.thumbnail-scroll').scrollLeft();

    if (current > 0) {
        $('.thumbnail-scroll').animate({
            scrollLeft: '-=' + 470
        }, 1000);
    }
}

.thumbnail-scroll  {
         height: 150px;
         overflow-x: auto;
         white-space: nowrap;
         overflow:hidden;
         background-color:  #cc33ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style=" background-color:   #6666ff; line-height: 230px;">
         <div> some content </div>
         <div> some content </div>
         <div> some content </div>
      </div>
      <div style=" display: flex; ">
         <div class="move-left" style="width: 150px; line-height: 145px; padding-right: 10px;">
            <a onclick="move_left()" href="#">
            <span> LEFT </span>
            </a>
         </div>
         <div class="thumbnail-scroll" id="thumbnail-scroll">
            <span> some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content </span>
         </div>
         <div class="move-right" style="width: 150px;  line-height: 145px; padding-left: 10px;">
            <a href="#" onclick="move_right()">
            <span> RIGHT </span>
            </a>
         </div>
      </div>

Answer 1

这是因为将 href 设置为 #。这是单击哈希链接时的正常行为(未在页面中找到)。

只需删除属性即可解决问题。 (另一种方法是通过 jQuery 绑定(bind)处理程序并对传递的事件使用 preventDefault())

function move_right() {
    var current = $('.thumbnail-scroll').scrollLeft();
    var maximal = document.getElementById("thumbnail-scroll").scrollWidth;
    var visible = document.getElementById("thumbnail-scroll").offsetWidth;
    var move;

    if ((current + visible) < maximal) {


        $('.thumbnail-scroll').animate({
            scrollLeft: '+=' + 470
        }, 1000);

    }
}



function move_left() {
    var current = $('.thumbnail-scroll').scrollLeft();


    if (current > 0) {


        $('.thumbnail-scroll').animate({
            scrollLeft: '-=' + 470
        }, 1000);

    }
}

.thumbnail-scroll  {
         height: 150px;
         overflow-x: auto;
         white-space: nowrap;
         overflow:hidden;
         background-color:  #cc33ff;
         }

a[onclick]{cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style=" background-color:   #6666ff; line-height: 230px;">
         <div> some content </div>
         <div> some content </div>
         <div> some content </div>
      </div>
      <div style=" display: flex; ">
         <div class="move-left" style="width: 150px; line-height: 145px; padding-right: 10px;">
            <a onclick="move_left()">
            <span> LEFT </span>
            </a>
         </div>
         <div class="thumbnail-scroll" id="thumbnail-scroll">
            <span> some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content </span>
         </div>
         <div class="move-right" style="width: 150px;  line-height: 145px; padding-left: 10px;">
            <a onclick="move_right()">
            <span> RIGHT </span>
            </a>
         </div>
      </div>