CSS overflow:auto und Scrolling nach links

SaxnPaule

Admiral
Registriert
Okt. 2010
Beiträge
8.806
Hallo Community,

ich plage mich jetzt schon seit mehreren Stunden mit einem Problem rum, bei dem ich mittlerweile kurz vor der Kapitulation stehe.

Ich möchte ein Image zentriert darstellen und bei Bedarf zoomen --> soweit alles kein Problem.
Ich möchte, dass sich das Bild bis zur maximalen Breite ausbreitet (nach links UND rechts) und danach Scrollbalken erscheinen --> Auch kein Thema

ABER: Der horizontale Scrollbalken lässt mich in keinem meiner Versuche nach links scrollen, sondern immer nur nach rechts. Somit gelingt es mir nicht an den linken Bildrand zu scrollen. Hat jemand dafür eine Lösung?

Einmal als jsFiddle und einmal als Code:

Code:
<html>
<head>
    <title>Zoom</title>
    <style>
        body {
            background: #666666;
        }

        .content {
            background: #C3C3C3;
            width: 80%;
            height: 100%;
            margin: auto;
        }

        .img-wrapper {
            display: flex;
            justify-content: center;
            width: auto;
            overflow: auto;
            margin: 0 auto;
        }

        .my-image {
            height: 400px;
            transform-origin: top;
        }

        .slidecontainer {
            position: absolute;
            bottom: 50px;
            left: 47%;
            background: #0b1e2a;
        }

    </style>

</head>

<body>

<div class="content">
    <div class="img-wrapper">
        <img id="bacon" class="my-image"
             src="https://media.istockphoto.com/photos/cooked-bacon-rashers-closeup-isolated-on-a-white-background-picture-id508755080?s=2048x2048"/>
    </div>

    <div class="slidecontainer">
        <input type="range" min="0" max="100" value="0" class="slider" id="img-slider">
    </div>

</div>

<script type="text/javascript">
    function zoom(id, value) {
        var scale = "scale(" + value + ");"
        var style = "-ms-transform:" + scale + "-webkit-transform:" + scale + "transform:" + scale;
        document.getElementById(id).setAttribute("style", style);
    }


    var imgSlider = document.getElementById("img-slider");
    imgSlider.oninput = function () {
        multiplier = 3;
        var zoomlevel = 1 + this.value / 100 * multiplier;
        zoom("bacon", zoomlevel);
    }

</script>

</body>
</html>
 
Zuletzt bearbeitet:
Das Problem ist, dass du mit transform-origin: top; das Bild nach links raus aus dem Container gedrückt wird. Mit transform-origin: top left; passiert das nicht.
 
Richtig, damit habe ich aber immer ungenutzten Platz auf der linken Seite des Bildschirmes. Das gilt es zu vermeiden.
 
Verstehe nicht wie du das meinst. Das ändert doch nur, wohin gezoomt wird, die Größe an sich bleibt gleich.
 
Ja, das weiß ich. Dann bleibt aber an der linken Bildschirmseite Platz ungenutzt:

2018-10-12 09_36_26-Zoom.png
Ergänzung ()

Ich habe die Antwort jetzt auf StackOverflow bekommen. Es muss noch etwas mehr Javascript Magie gemacht werden. Hier die Lösung:

Code:
<html>
    <head>
        <title>Zoom</title>
        <style>
            body {
                background: #666666;
            }

            .content {
                background: #C3C3C3;
                width: 80%;
                height: 100%;
                margin: auto;
            }

            .img-wrapper {
                display: flex;
                justify-content: center;
                width: auto;
                overflow: auto;
                margin: 0 auto;
            }

            .my-image {
                height: 400px;
                transform-origin: top;
            }

            .slidecontainer {
                position: absolute;
                bottom: 50px;
                left: 47%;
                background: #0b1e2a;
            }

        </style>

    </head>

    <body>

    <div class="content">
        <div class="img-wrapper" id="img-wrapper">
            <img id="bacon" class="my-image"
                 src="https://media.istockphoto.com/photos/cooked-bacon-rashers-closeup-isolated-on-a-white-background-picture-id508755080?s=2048x2048"/>
        </div>

        <div class="slidecontainer">
            <input type="range" min="0" max="100" value="0" class="slider" id="img-slider">
        </div>

    </div>

    <script type="text/javascript">
        function zoom(id, value) {
            var outerDiv = document.getElementById('img-wrapper');
            var scale = "scale(" + value + ");"
            var margin = 0;
            var origin = "top";       
            if (outerDiv.clientWidth !== outerDiv.scrollWidth) {
                origin = "top left";
                margin = 0 - outerDiv.clientWidth / 2 - 20;
            }
       
            var style = "margin-left:" + margin + "px; -ms-transform:" + scale + "-webkit-transform:" + scale + "transform:" + scale + "transform-origin:" + origin + ";";
           
            document.getElementById(id).setAttribute("style", style);

            outerDiv.scrollLeft = outerDiv.scrollWidth / 2 - outerDiv.clientWidth / 2;
        }


        var imgSlider = document.getElementById("img-slider");
        imgSlider.oninput = function () {
            multiplier = 3;
            var zoomlevel = 1 + this.value / 100 * multiplier;
            zoom("bacon", zoomlevel);
        }

    </script>

    </body>
</html>
 
Zuletzt bearbeitet:
Zurück
Oben