0

第一次在 StackOverFlow.com 上发帖，可惜我被认为是计算机科学专业的学生。首先，非常感谢你们通过其他人的询问为我提供的帮助，回答我自己的问题。今天我有自己的真实问题，像这篇文章的标题可能很难理解。不过我喜欢挑战。

</introduction>

摘要：在艺术家/哲学页面上使用网站 somethingmedia.co 的内容；通过特别考虑移动设备来创建更加用户友好的显示。

方法：将阻止的“div”内容更改为几乎内联并允许侧滚动。请访问此处以获得[demo]的清晰表示，并在下面查看解释 [a]

ALTERATION：虽然允许在 [method] 中看到的触摸和按住灵敏度选项，但也允许使用鼠标滚轮进行滚动。请参阅[demo2]并访问下面的说明 [b]。

功能：除了 [method] 和 [alteration] 之外，还允许在用户移动页面滚动条本身时发生滚动。除了（这是棘手的部分），使滚动条垂直，但只左右移动内容。滚动条仅在非移动设备上可见（即 PC / 笔记本电脑 / Macintosh / 等）。

结论：我喜欢制作网站，虽然我从未参加过正式的网站课程（从 6 年级开始），但我继续根据我发现的独特和有趣的东西学习新事物。因此，我很想知道是否有办法以简单优雅的方式实现这种设计。虽然我在学校的计算机科学经验仅限于 Java 和 Python，但我在 CSS、HTML、Java Script 和一点 CGI 方面有独立的经验。如果你愿意和我一起挑战，我会问你：“我的第一步是什么？”

</concept>

解释[a]：code.comunicatek.com/en/tekslider_a_touch_focused_slider.html

解释[b]：css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

4

1 回答 1

0

这个问题有点令人困惑，但假设你真正的意思是，“我怎样才能拥有一个使用垂直滚动条水平滚动页面的页面”，我会尝试这样的事情：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">  
    <title>Vertizontal Scrolling</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
    <script>
        $(document).ready(function() {
            $('#page-scroll').height($('#page-wrap').outerWidth());
            $(window).scroll(function() {
                $('#page-wrap').css('left',-1 * $(window).scrollTop());
            });
        });
    </script>

    <style type="text/css" style="display: none !important;">
        #page-wrap {
            position:fixed;
            left:0;
            top:0;
            z-index:10;
        }
        #page-scroll {
            z-index:1;
        }
    </style>

</head>
<body>  

    <div id="page-scroll">
        <!--- intentionally empty --->
    </div>

    <div id="page-wrap">
        <!--- really wide content goes here --->
    </div>

</body>
</html>
于 2013-10-12T09:16:33.750 回答