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

0 回答 0