<style>
.container {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
.image {
display: inline-block;
width: 200px;
height: auto;
}
</style>
<div class="container">
<img class="image" src="./test.png">
<img class="image" src="./test.png">
<img class="image" src="./test.png">
<img class="image" src="./test.png">
<img class="image" src="./test.png">
<img class="image" src="./test.png">
<img class="image" src="./test.png">
</div>
原生js实现
window.addEventListener('DOMContentLoaded', function() {
var container = document.querySelector('.container');
var lastImage = document.querySelector('.image:last-child');
container.scrollLeft = lastImage.offsetLeft;
});
jq实现
$(document).ready(function () {
var container = $('.container');
var lastImage = $('.image:last-child');
var scrollAmount = lastImage.offset().left - container.offset().left;
container.scrollLeft(scrollAmount);
});