本文介绍了黑客垂直滚动到水平滚动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

所以如果:

I know this goes against every usability rule in the book, but does anyone have any ideas for forcing a vertical scroll to scroll horizontally?

So if:

谢谢!

推荐答案

尽管如此,这听起来像是一件非常奇怪的事情和我的初步测试表明它可以完成,但结果几乎没用。试试这个:

With all respect, this sounds like a very strange thing to do and my preliminary tests show that it can be done, but the result is practically useless. Try this:

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

Since the scrolling is on the actual browser window itself it seems like it's not possible to capture the scrolling event and prevent it from propagating. I tried this using jQuery (event.stopPropagation) and it didn't work. So insted I resorted to adding top padding to the body to create the illusion that no vertical scrolling has occured. I can't see this being used in a live environment though since the result is horrible. :-)

然而,探索这是一件有趣的事情!

Nevertheless, it was a fun thing to explore!

问候,
托马斯卡恩

Regards,Thomas Kahn

这篇关于黑客垂直滚动到水平滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-17 17:44
查看更多