使用jQuery scrollLeft()方法默认向右滚动，我的代码有何问题？

我来帮你排查并搞定这个问题～你的代码目前有两个关键问题导致滚动效果没生效，咱们一个个来修正：

1. DOM加载时机不对 #

你把脚本放在了<head>标签里，这时候浏览器还没渲染页面中的.entry-content元素，jQuery调用$('.entry-content')根本找不到目标元素，后续的宽度获取和滚动操作自然都无效。

解决办法是把代码包裹在$(document).ready()里，确保DOM完全加载后再执行：

$(document).ready(function() {
  // 你的滚动逻辑写在这里
});

或者也可以把整个<script>标签移到<body>标签的末尾，同样能保证DOM加载完成后再执行代码。

2. 滚动距离计算错误 #

$('.entry-content').width()获取的是容器的可见宽度，而要滚动到内容最右侧，我们需要的是「内容总宽度 - 容器可见宽度」的差值——这个差值才是容器能横向滚动的最大距离。

用原生DOM属性可以直接获取对应值：元素.scrollWidth是内容的总宽度（包括超出容器的部分），元素.clientWidth是容器的可见宽度。

修正后的完整代码 #

<head>
  <title>Labs</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      const contentElement = $('.entry-content')[0];
      // 计算滚动到最右侧需要的距离
      const scrollRightDistance = contentElement.scrollWidth - contentElement.clientWidth;
      $('.entry-content').scrollLeft(scrollRightDistance);
    });
  </script>
  <style>
    /* 确保容器能横向滚动 */
    .entry-content {
      overflow-x: auto;
      white-space: nowrap; /* 如果内容是行内元素，加上这个防止内容换行 */
    }
  </style>
</head>

额外注意点 #

别忘了给.entry-content元素设置overflow-x: auto或者overflow-x: scroll的CSS样式，如果没有这个，容器不会出现横向滚动条，scrollLeft操作也不会有视觉效果。

内容的提问来源于stack exchange，提问作者poopyh3ad