Question

我知道这违背了本书中的每一个可用性规则，但有没有人有任何想法强制垂直滚动水平滚动？

所以如果：

用户正在查看页面，向下滚动，页面会水平滚动吗？

谢谢！

Answer 1

尽管如此，这听起来像是一件非常奇怪的事情，我的初步测试显示它可以完成，但结果实际上是无用的。试试这个：

<!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），但它没有用。因此，我试图在身体上添加顶部填充物，以创造不会发生垂直滚动的错觉。虽然因为结果很糟糕，我看不到它在现场环境中的使用。： - ）

然而，探索这是一件有趣的事情！

此致托马斯卡恩

Answer 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/

黑客垂直滚动到水平滚动

2 个答案: