javascript - 如何将滚动条(水平)指针移动到特定位置？

Question

我在页面底部有一个分页。每次点击分页页面后，新数据都会刷新，点击的数字会突出显示。 滚动条是水平的，如下图所示。 scrollbar image

当我点击最后一个分页时，这个 no 被突出显示但滚动条拇指没有被移动。

这是我的分页代码:

    .pagination::-webkit-scrollbar {
          background-color:#D9D9D9;
          height:5px;
     }

    .pagination::-webkit-scrollbar-thumb {
               -webkit-box-shadow: inset 0 0 6px #0C62B3;
    }

    <ul class="pagination">

                    @for (int i = 1; i <= Model.PageCount; i++)
                    {

                        if (i != Model.CurrentPageIndex)
                        {
                                <li class="page-item"><a class="page-link" href="javascript:PagerClick(@i);">@i</a></li>
                        }
                        else
                        {
                               <li class="page-item active"><a class="page-link" href="javascript:PagerClick(@i);">@i</a></li>
                        }

                    }

    </ul>  

我试图为滚动条提供硬编码值:

          $(document).ready(function () {
              var navwidth = $('.pagination');
              navwidth.scrollLeft(navwidth.scrollLeft() - 200);
          });

但是什么也没发生..

Answer 1

因为滚动条已经在左边，函数 scrollLeft() 返回 0。如果你用 200 减去它，你会得到 -200，这是行不通的。如果您添加 200，它将起作用。

还添加了一些 css 和随机文本，使列表在溢出时显示水平滚动条。

$(document).ready(function() {
  var navwidth = $('.pagination');
  navwidth.scrollLeft(navwidth.scrollLeft() + 200);
});

.pagination {
  overflow-x: scroll;
  white-space: nowrap;
}

.pagination::-webkit-scrollbar {
  background-color: #D9D9D9;
  height: 5px;
}

.pagination::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px #0C62B3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="pagination">
  <li class="page-item"><a class="page-link" href="javascript:PagerClick(@i);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt, lorem at cursus condimentum, libero enim scelerisque neque, et placerat magna turpis sed sapien. Phasellus vitae nulla sit amet est malesuada vulputate.</a></li>
  <li class="page-item active"><a class="page-link" href="javascript:PagerClick(@i);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt, lorem at cursus condimentum, libero enim scelerisque neque, et placerat magna turpis sed sapien. Phasellus vitae nulla sit amet est malesuada vulputate.</a></li>
</ul>