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

Question

这是我的代码：

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

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

Answer 1

通常在这种情况下你会说 var left = $('.entry-content').width() * -1;，这在这种情况下行不通吗？

Answer 2

您应该在页面加载完成后执行您的代码（因此图像宽度已知），为此您需要将代码插入 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>

Answer 3

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

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

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

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

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

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

这个例子等同于.

Answer 4

尝试以下脚本：

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

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

为了使您的代码段正常工作，您需要对 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 class 的 div 元素的宽度，并且由于 div 的内容现在可以使用可用的滚动条滚动，您可以调用 scrollLeft( div 上的 value) 方法将此 div 的内容滚动到左侧。 如果你想滚动到图像的最右边，你应该将 amountToScroll = widthOfImage-widthOfDivContaing 图像传递给 scrollLeft(amountToScroll) 即

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

希望对您有所帮助。

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

using jQuery scollLeft() method to scroll to the right by default, what is wrong with my code?

javascript

jquery

user-interface

jscrollbar

jquery-jscroll