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