Question

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

</introduction>

摘要：在艺术家/哲学页面上使用网站的内容somemedia.co;创建一个更加用户友好的显示器，特别考虑移动设备。

方法：更改阻止'div'内容实际内联并允许侧滚动。请访问此处以获得[demo]的清晰显示，并参阅下面的说明[a]

更改：虽然允许触摸和保持灵敏度选项（如[方法]中所示）也允许使用鼠标滚轮进行滚动。请参阅[demo2]并访问下面的说明[b]。

功能：除了[方法]和[更改]之外，还允许在用户移动页面滚动条本身时进行滚动。除了（这里是棘手的部分），滚动条垂直，但只能左右移动内容。滚动条仅在非移动设备上可见（即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 /

Answer 1

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

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

垂直滚动条，可以将内容横向移动

1 个答案: