将垂直滚动转化为水平滚动的黑客技巧

Question

将垂直滚动转化为水平滚动的黑客技巧

jqueryscrollemulation

4

我知道这与书中的每个可用性规则都相悖，但是否有任何想法可以强制垂直滚动条水平滚动？

所以，如果：

用户查看页面并向下滚动，则页面将水平滚动？

谢谢！

- John Franklin

1

这是一个简单的问题，不是很广泛，实际上现在（2013）被广泛使用，尽管它在2010年可能更加晦涩。我记不清了。 - coreyward

2个回答

2

如果有人仍然想知道，我想做同样的事情，并且这对我有效，使用多个div元素，固定位置和一些JavaScript代码。

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');
}

创建了一个小型的示例:

http://jsfiddle.net/zfBhK/

- Angelo A

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tkahn · Accepted Answer

非常尊重地说，这听起来是一件非常奇怪的事情，我的初步测试显示它是可行的，但结果实际上毫无用处。试试这个：

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

由于滚动是在实际的浏览器窗口本身上进行的，因此似乎不可能捕获滚动事件并阻止其传播。我尝试使用jQuery（event.stopPropagation），但没有成功。所以我转而向body添加顶部填充，以营造没有发生垂直滚动的假象。但我认为这种方法不适合在实际环境中使用，因为结果很糟糕。 :-)

尽管如此，探索这个问题还是很有趣的！

祝好， Thomas Kahn