这是我的代码：
<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>
我希望滚动在用户访问页面时自动显示在最右侧。目前，默认情况下它向左滚动。请告诉我我的代码出了什么问题。
确保在DOM 元素之后包含该脚本，或将其包装在 DOMContentLoaded 处理程序中。例如：
<script>
document.addEventListener('DOMContentLoaded', function() {
var left = $('.entry-content').width();
$('.entry-content').scrollLeft(left);
});
</script>
在您的示例中，选择器$('.entry-content')不可能选择实际元素，因为当 javascript 代码运行时它还不存在。DOM 从上到下解析，在此过程中找到的任何脚本都会立即执行。
正如Nelson在他的回答中还指出的那样，记住图像可能需要一段时间才能加载也是一个好主意。只有在加载后，图像才会开始占用所需的实际空间。因此，如果在加载图像之前测量.entry-content的尺寸，则如果图像需要比包含元素自然占用的更多的水平空间，则会得到一个不准确的数字。
要解决此问题，您可以在window上侦听"load"事件，该事件将始终在 DOMContentLoaded之后触发，而不是在所有资源(其中您的映像)加载之前触发：
<script>
window.addEventListener('load', function() {
var left = $('.entry-content').width();
$('.entry-content').scrollLeft(left);
});
</script>
这个例子相当于纳尔逊的答案。
通常对于这样的位置情况，您只会说var left = $('.entry-content').width() * -1;，在这种情况下不起作用吗？
您应该在页面完成加载时执行代码(因此图像宽度是已知的)，为此您需要在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>
尝试以下脚本：
<script>
$(document).ready(function(){
var left = document.querySelector('div.entry-content').getBoundingClientRect().left;
window.scrollBy(left,0);
});
</script>
我使用 getBoundingClientRect() 来获取带有 .entry-content class 属性的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 显示滚动条。现在左边将包含应用 .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>
希望这有帮助。