javascript - angularjs/javascript - 在未应用的图像上向左滚动

Question

我有一个比它的 div 大的图像，允许用户在图像上左右滚动。我正在尝试将图像居中，以便用户看到图像的中心。我试过向左滚动

View :

<div style="overflow: scroll;" ng-controller="ColorsCtrl">

    <div ng-show="!isLandscape">
        <div  style="overflow: scroll;" ng-if="isSelected(color.code)" ng-repeat="color in colors">
            <img id="fullSwatch" ng-src="{{ images.swatches_large[color.code] }}" full-swatch>
        </div>
    </div>

</div>

我有一个指令可以操纵图片的图像以允许滚动。

colorsController.directive('fullSwatch', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {

                var img = element[0];

                //swap width and height values because they are before orientation change
                var h = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
                var w = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

                var imageWidth = img.width;
                var imageHeight = img.height;

                var aspectRatio = imageWidth / imageHeight;

                // fill image vertically
                imageHeight = h;
                imageWidth = h * aspectRatio;

                img.style.width = imageWidth + "px";
                img.style.height = imageHeight + "px";
                img.style.maxWidth = "none";

                // add scroll left to parent container to center image
                var container = img.parentNode();

                var scrollLeft = imageWidth / 2;
                container.scrollLeft = scrollLeft;

            });
        }
    };
});

没有应用向左滚动，图像从一直向左开始。

Answer 1

尝试添加 overflow:auto;在样式标签中是这样的:
<div style="overflow:auto;"></div>
你可以看到我的源代码 quiz site寻求帮助