CSS overflow:auto und Scrolling nach links

SaxnPaule · 12. Oktober 2018

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>

Bagbag · 12. Oktober 2018

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.

SaxnPaule · 12. Oktober 2018

Richtig, damit habe ich aber immer ungenutzten Platz auf der linken Seite des Bildschirmes. Das gilt es zu vermeiden.

Bagbag · 12. Oktober 2018

Verstehe nicht wie du das meinst. Das ändert doch nur, wohin gezoomt wird, die Größe an sich bleibt gleich.

SaxnPaule · 12. Oktober 2018

Ja, das weiß ich. Dann bleibt aber an der linken Bildschirmseite Platz ungenutzt:

Ergänzung (12. Oktober 2018)

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>

Suche

CSS overflow:auto und Scrolling nach links

SaxnPaule

Fleet Admiral

Bagbag

Commodore

SaxnPaule

Fleet Admiral

Bagbag

Commodore

SaxnPaule

Fleet Admiral

Ähnliche Themen