Question

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

当我单击到最后一个分页数时，此按钮未突出显示，但滚动条的拇指未移动。

这是我的分页代码：


    .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>

如何将滚动条（水平）指针移动到特定位置？

1 个答案: