js控制默认选中图片，在屏幕宽度不足，选中的图片超出屏幕宽度问题

 <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);
});