Question

这个问题被问到了，我正在尝试做类似的事情，因为我在那里发帖试图寻找替代方案，但评论被删除了我问了一个新问题。

此版本的答案删除了自然的水平功能，而不是用垂直替换水平，我想将其添加为附加功能，如水平滚动时水平滚动，但是当您垂直滚动时水平滚动。所以你可以做任何一个或者，它具有相同的效果..

以下是示例代码。

当你向上或向下移动鼠标滚轮或使用跟踪板向上或向下滚动，或者通过垂直移动滚动条时，你能帮助使这两个功能都可用于水平滚动。最终结果是滚动内容水平而不管

Hacking Vertical Scroll into Horizontal Scroll

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

垂直滚动黑客，水平滚动内容

0 个答案: