Keine horizontalen Bildlaufleiste auf der rechten Schwimmer

StackOverflow https://stackoverflow.com/questions/1633971

  •  06-07-2019
  •  | 
  •  

Frage 

<html>
<head>
<style type="text/css" rel="stylesheet">
    * {margin:0;padding:0;}

    div#box {background-color:green;width:1000px;}

    /* #box {position:absolute;top:0;right:0;} */
    /* #box {position:absolute;top:0;left:0;} */
    /* #box {float:right;} */
    #box {float:left;}

    .clearer {clear:both;}
</style>
</head>
<body>
    <div id="box">
        asdafdsf
    </div>
    <div class="clearer"></div>
</body>
</html>

Kommentar- der erste Schwimmer links-ID mit dem Schwimmer rechts ein und Sie werden sehen. Ich habe meine versuchten Lösungen als auch als Kommentar gekennzeichnet.

Sie sollten eine vollständige Repro aus einer Kopie haben und einfügen.

War es hilfreich?

Lösung

Ich glaube nicht, dass es eine Möglichkeit, um dies ohne Javascript. Der Browser rendert eine Seite relativ zu der oberen linken Ecke dieser Seite, so dass alles, was über oder links von diesem Punkt positionierte 0,0 effektiv Off-Screen ist. Alle Überlauf geschieht nach unten und rechts. Es ist die gleiche Art und Weise mit Inhalt innerhalb eines Blockelements. Also, wenn Sie ein Element auf der rechten Seite der Seite, die relativ breiter als 100% Breite. Der Teil links von dem 0,0 Ursprungspunkt wird einfach offscreen werden.

Ich liebe würde für jemand, obwohl ich das Gegenteil zu beweisen.

Hier ist eine JavaScript-Lösung, die funktioniert: 

<html>
<head>
<style type="text/css" rel="stylesheet">
    * {margin:0;padding:0;}
    div#box {background-color:green;width:1000px;}
    #box {position:absolute;top:0;left:0;}
    .clearer {clear:both;}
</style>
</head>
<body>
    <div id="box">
        asdafdsf
    </div>
    <div class="clearer"></div>
    <script type="text/javascript">
        function layout() {
            if( typeof( window.innerWidth ) == 'number' )
                this.screenWidth = window.innerWidth;   
            else //patch for IE
                this.screenWidth = document.body.clientWidth;
            this.el = document.getElementById('box')
            if (this.el.offsetWidth > this.screenWidth)
                window.scroll(this.el.offsetWidth,0);
            else
                this.el.style.left = (this.screenWidth - this.el.offsetWidth) + 'px';
        }
        function eventListener(el,action,func) {
            if (el) {
                if (el.addEventListener)
                    el.addEventListener(action, func, false);
                else if (el.attachEvent)
                    el.attachEvent('on' + action, func);
            }
        }
        eventListener(window,'resize',layout);
        layout();        
    </script>
</body>
</html>

Andere Tipps

Ich hatte (was ich denke, sein kann) ein ähnliches Problem, bei dem ich ein Canvas-Elemente nach rechts ausrichten wollte, die breiten als der div ist, dass es hält. Das div ist etwa 300px, das Canvas-Element etwa 1000px.

Mit float: right wurde die Leinwand rechts ausgerichtet, aber die Bildlaufleisten auf dem div verschwunden.

Ich löste dies mit jQuery scrollLeft() mit der ursprünglichen Rolle auf dem div und Leinwand Breiten auf Basis eingestellt, ähnlich wie: 

$("#div").scrollLeft(canvas.width() - div.width() )
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top