Question

我在Home，template和3d页面中有三个div。模板和3d div将驻留在屏幕之外。

当我点击导航锚点时，页面会滚动到目标div。

我需要使用jQuery的滚动功能，因为将来我会在parallex中使用这个滚动功能。

下面是用于滚动但无法显示离开屏幕的左侧div的代码。

和js小提琴链接http://jsfiddle.net/naresh_kumar/CEC3L/4/

<div id="page" class="clearfix" style="width: 1800px; left: -500px;">
    <div id="header">  
        <div class="nav-enabled">
            <ul id='navigation'>
                <li><a href="#home">Home</a></li>
                <li><a href="#templates">Templates</a></li>
                <li><a href="#3d">3D</a></li>
            </ul>
        </div>
    </div>

    <div id="templates" class="content" style="height: 378px; width: 516px;">
        Template
    </div>

    <div id="home" class="content" style="height: 378px;  width: 516px;">
        Home
    </div>

    <div id="3d" class="content" style="height: 378px; width: 516px;">
        3D
    </div>
</div>   

<script>
   $(function() {
       $('ul#navigation a').bind('click',function(event){
           var $anchor = $(this);
           $('html, body').stop().animate({
               scrollLeft: $($anchor.attr('href')).offset().left
                   }, 1000);
               event.preventDefault();
           });
       });
</script>

<style>
    #page
    {
        background: none repeat scroll 0 0 #E6E6E8;
        height: auto;
        min-height: 100%;
        position: relative;
        top: 0;
    }
    .content
    {
        background: none repeat scroll 0 0 #E6E6E8;
        color: #000000;
        float: left;
    }
    #header
    {
        clear: both;
        color: #FFFFFF;
        display: block;
    }
    #header .nav-enabled
    {
        display: block;
        float: left;
        height: auto;
        left: 0;
        opacity: 0.72;
        padding: 20px;
        position: fixed;
        top: 0;
        width: auto;
        z-index: 5;
    }
</style>

Answer 1

解决了它。您可以查看链接

见下面的示例..
只需重新排列div位置即可。

<div id="home" class="content" style="height: 378px;  width: 516px;">
    Home
</div>
     <div id="templates" class="content" style="height: 378px; width: 516px;">
   Template
</div>
<div id="3d" class="content" style="height: 378px; width: 516px;">
    3D
    </div>
</div>

http://jsfiddle.net/CEC3L/8/

http://jsfiddle.net/CEC3L/26/

Answer 2

您的#page div有left: -500px。

<div id="page" class="clearfix" style="width: 1800px; left: -500px;">

删除

<div id="page" class="clearfix" style="width: 1800px;">

它工作正常。

如果你想要＆＃34; home＆＃34;在页面加载时可以看到面板，然后你需要保留偏移量，然后在页面加载时使用一点javascript到＆＃34; un-do＆＃34;偏移量，同时调整scrollLeft。

http://jsfiddle.net/CEC3L/20/

如何向左 - 向右滚动页面左侧div离开屏幕

2 个答案: