Hacking Vertical Scroll into Horizontal Scroll [cl

I know this goes against every usability rule in the book, but does anyone have any ideas for forcing a vertical scroll to scroll horizontally?

So if:

The user was viewing the page, and scrolled downwards, the page would scroll horizontally?

Thanks!

回答1:

With all respect, this sounds like a very strange thing to do and my preliminary tests show that it can be done, but the result is practically useless. Try this:

<!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>

Since the scrolling is on the actual browser window itself it seems like it's not possible to capture the scrolling event and prevent it from propagating. I tried this using jQuery (event.stopPropagation) and it didn't work. So insted I resorted to adding top padding to the body to create the illusion that no vertical scrolling has occured. I can't see this being used in a live environment though since the result is horrible. :-)

Nevertheless, it was a fun thing to explore!

Regards, Thomas Kahn

回答2:

If anyone still wants to know. I wanted to do the same, and this worked for me, using multiple divs, position fixed and some 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');
}

Created a little fiddle:

http://jsfiddle.net/zfBhK/