0

这是我的代码：

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

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

4

4 回答 4

0

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

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

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

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

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

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

这个例子相当于尼尔森的回答。

于 2018-03-22T19:46:27.397 回答
0

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

于 2018-03-22T19:12:30.700 回答
0

尝试以下脚本：

<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) 方法使用该值滚动窗口。

为了使您的代码段正常工作，您需要在 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%，如果图像宽度大于 div 的宽度，将溢出设置为 true将导致 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>

希望这可以帮助。

于 2018-03-22T20:03:48.400 回答
0

您应该在页面完成加载后执行代码（因此图像宽度已知），为此您需要在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>
于 2018-03-22T19:20:29.797 回答