Hacking Vertikale Scrollen in der Horizontalen Scrollen

Ich weiß, das geht gegen jede usability-Regel im Buch, aber hat jemand irgendwelche Ideen für das erzwingen vertikaler Bildlauf um horizontal zu scrollen?

Also, wenn:

Der Benutzer, die die Seite anzeigen, und nach unten gescrollt, die Seite horizontal scrollen?

Dank!

Dies ist eine einfache Frage, aber nicht breit, und das ist etwas, was weit verbreitet ist jetzt (2013), obwohl es vielleicht mehr esoterische 2010...ich erinnere mich nicht.

InformationsquelleAutor John Franklin | 2010-10-07

Mit allem Respekt, das klingt wie eine sehr seltsame Sache zu tun, und meine ersten tests zeigen, dass es getan werden kann, aber das Ergebnis ist praktisch unbrauchbar. Versuchen Sie dies:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Scrolling test</title>
<!-- jQuery library - I get it from Google API's -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    $(document).ready(function(){

    $(window).scroll(function(event){
        var topScroll = $(window).scrollTop();
        var leftScroll = $(window).scrollLeft();
        $(window).scrollLeft(topScroll);
        $("body").css("padding-top", leftScroll);
    });

    });

    </script>

    <style type="text/css">
    h1 {
        font-family: Verdana, Arial, sans-Serif;
        font-size: 46px;
        display: block;
        white-space:nowrap;
    }

    body {
        height: 1000px;
    }
    </style>
</head>

<body>
<div id="content"><h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt dictum rhoncus. Phasellus nulla nulla, facilisis eu aliquam aliquet, mattis pulvinar purus. </h1></div>
</body>
</html>

Da der Bildlauf ist die eigentliche browser-Fenster selbst, wie es scheint, ist es nicht möglich zu erfassen, das Scroll-Ereignis und verhindern, dass es propagieren. Ich habe versucht, diese unter Verwendung von jQuery (event.stopPropagation) und es hat nicht funktioniert. So anstelle ich Griff zum hinzufügen von top-Polsterung auf den Körper, um die illusion zu erzeugen, dass kein vertikales scrollen aufgetreten ist. Ich kann nicht sehen, diese werden Sie in einer live-Umgebung, da das Ergebnis ist schrecklich. 🙂

Trotzdem war es eine lustige Sache zu erkunden!

Grüße,
Thomas Kahn

Sie können auch die Fenster.scrollTo () - Funktion auf "Abbrechen" wird der vertikale Bildlauf durch einstellen vertikalen offset wieder auf den Wert vor der scroll-Ereignis. Vielleicht weniger ein hack als top-Polsterung.

InformationsquelleAutor tkahn

Wenn noch jemand wissen will. Ich wollte das gleiche zu tun, und dieser arbeitete für mich, mit mehreren divs, position, Festnetz-und JavaScript-code.

HTML:

<div id='first'>
    <div id='second'>
        <!-- content -->
    </div>
</div>

CSS:

#first {
    overflow:hidden;
    height:9000px;
}
#second {
    width:9000px;
    position:fixed;
}

JS:

window.onscroll=function() {
    var scroll = window.scrollY;
    $('#second').css('left', '-' + scroll + 'px');
}