使用jQuery scollLeft() 方法默认向右滚动，我的代码有什么问题？答案

【问题标题】：using jQuery scollLeft() method to scroll to the right by default, what is wrong with my code?使用jQuery scollLeft() 方法默认向右滚动，我的代码有什么问题？
【发布时间】：2023-03-12 01:52:02
【问题描述】：

这是我的代码：

<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>
var left = $('.entry-content').width();
$('.entry-content').scrollLeft(left);
</script>
</head>
<body>
    <div class="container"> 
        <div class="entry-content"><img src="map.png"></div>
    </div>
</body>

当用户访问页面时，我希望滚动条自动显示到最右侧。目前它默认向左滚动。请告诉我我的代码有什么问题。

【问题讨论】：

标签： javascript jquery user-interface jscrollbar jquery-jscroll

【解决方案1】：

确保在 DOM 元素之后包含该脚本，或将其包装在 DOMContentLoaded handler 中。例如：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var left = $('.entry-content').width();
        $('.entry-content').scrollLeft(left);
    });
</script>

在您的示例中，选择器 $('.entry-content') 不可能选择实际元素，因为在 javascript 代码运行时它还不存在。 DOM 会从上到下进行解析，沿途找到的任何脚本都会立即执行。

正如 Nelson 在他的回答中指出的那样，记住图片可能需要一段时间才能加载也是一个好主意。只有在加载后，图像才会开始占用它需要的实际空间。因此，如果您在加载图片之前测量 .entry-content 的尺寸，如果图片需要的水平空间比包含元素自然占用的更多，那么您会得到一个不准确的数字。

要解决此问题，您可以改为在 window 上监听 "load" event，它总是会在 DOMContentLoaded 之后触发，而不是在所有资源（其中包括您的图像）已加载之前触发：

<script>
    window.addEventListener('load', function() {
        var left = $('.entry-content').width();
        $('.entry-content').scrollLeft(left);
    });
</script>

这个例子等价于Nelson's answer。

【讨论】：

哇，成功了！！谢谢。我认为我放置脚本的位置有问题，但您添加到其中的窗口代码才是真正的诀窍

【解决方案2】：

通常对于像这样的位置情况，你只会说var left = $('.entry-content').width() * -1;，这在这种情况下不起作用吗？

【讨论】：

【解决方案3】：

您应该在页面完成加载后执行您的代码（因此图像宽度已知），为此您需要将代码插入到 window.load 事件的处理程序中，如下所示：

<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>
</head>
<script>
$(window).on('load', function() {
    var left = $('.entry-content').width();
    $('.entry-content').scrollLeft(left);
});
</script>
<body>
    <div class="container"> 
        <div class="entry-content"><img src="map.png"></div>
    </div>
</body>

【讨论】：

从版本 3 开始，$(...).load() 不再用于添加事件侦听器。见the note here。你可以改用$(...).on('load', () => ...)。
@poopyh3ad 我用 Jeffrey 指出的错误更新了答案中的代码，谢谢。

【解决方案4】：

试试下面的脚本：

<script>
$(document).ready(function(){
    var left = document.querySelector('div.entry-content').getBoundingClientRect().left;
    window.scrollBy(left,0);
});
</script>

我使用 getBoundingClientRect() 来获取具有 .entry-content 类属性的 div 元素的位置。 left 属性给出浏览器窗口左侧的 x 偏移值。现在，我使用该值使用 window.scrollBy(x,y) 方法滚动窗口。

为了让您的 sn-p 工作，您需要在您的 html 中进行一些更改：

 <script>
    $(document).ready(function(){
      var left = $('.entry-content').width();
      $('.entry-content').scrollLeft(left);
    });
 </script>

   <div class="container"> 
        <div class="entry-content" style="width:30%;overflow:auto"><img src="map.png"></div>
    </div>

请注意，我已将 div 的大小限制为 30%，并将溢出设置为 true 如果图像宽度大于 div 的宽度，则会导致 div 显示滚动条。现在 left 将包含应用了 .entry-content 类的 div 元素的宽度，并且由于现在可以使用可用的滚动条滚动 div 的内容，因此您可以在 div 上调用 scrollLeft(value) 方法将此 div 的内容滚动到左边。 如果你想滚动到图像的最右边，你应该将 amountToScroll = widthOfImage-widthOfDivContaing 图像传递给 scrollLeft(amountToScroll) 即

<script>
    $(document).ready(function(){
     var amountToScroll = $('img').width() - $('.entry-content').width()
    $('.entry-content').scrollLeft(amountToScroll);
    });
 </script>

希望这会有所帮助。

【讨论】：

要滚动到最右边的大小写，请确保在 html 中为 div 应用建议的更改，即应用 style="width:30%;overflow:auto" 。假设图像的宽度大于容器 div 的宽度。