Question

我需要能够滚动的div是：我需要它在时间轴div中滚动，并且最好有一个自定义滚动条，但这不是必需的。我试过插件和css解决方案但无济于事。我最好在jquery中寻找解决方案......

    <div class="timeHolder">
        <div class="timeView">              
<!-- Year Markers -->            
                <div class="yearMarker">1943</div><div class="yearMarker">1944</div><div class="yearMarker">1945</div><div class="yearMarker">1946</div><div class="yearMarker">1947</div><div class="yearMarker">1948</div><div class="yearMarker">1949</div><div class="yearMarker">1950</div><div class="yearMarker">1951</div><div class="yearMarker">1952</div><div class="yearMarker">1953</div><div class="yearMarker">1954</div><div class="yearMarker">1955</div><div class="yearMarker">1956</div><div class="yearMarker">1957</div><div class="yearMarker">1958</div><div class="yearMarker">1959</div><div class="yearMarker">1960</div><div class="yearMarker">1961</div><div class="yearMarker">1962</div><div class="yearMarker">1963</div><div class="yearMarker">1964</div><div class="yearMarker">1965</div><div class="yearMarker">1966</div><div class="yearMarker">1967</div><div class="yearMarker">1967</div><div class="yearMarker">1969</div><div class="yearMarker">1970</div><div class="yearMarker">1971</div><div class="yearMarker">1972</div><div class="yearMarker">1973</div><div class="yearMarker">1974</div><div class="yearMarker">1975</div><div class="yearMarker">1976</div><div class="yearMarker">1977</div><div class="yearMarker">1978</div><div class="yearMarker">1979</div><div class="yearMarker">1980</div><div class="yearMarker">1981</div><div class="yearMarker">1982</div><div class="yearMarker">1983</div><div class="yearMarker">1984</div><div class="yearMarker">1985</div><div class="yearMarker">1986</div><div class="yearMarker">1987</div><div class="yearMarker">1988</div><div class="yearMarker">1989</div><div class="yearMarker">1990</div><div class="yearMarker">1991</div><div class="yearMarker">1992</div><div class="yearMarker">1993</div><div class="yearMarker">1994</div><div class="yearMarker">1995</div><div class="yearMarker">1996</div><div class="yearMarker">1997</div><div class="yearMarker">1998</div><div class="yearMarker">1999</div><div class="yearMarker">2000</div><div class="yearMarker">2001</div><div class="yearMarker">2002</div><div class="yearMarker">2003</div><div class="yearMarker">2004</div><div class="yearMarker">2005</div><div class="yearMarker">2006</div><div class="yearMarker">2007</div><div class="yearMarker">2008</div><div class="yearMarker">2009</div><div class="yearMarker">2010</div><div class="yearMarker">2011</div><div class="yearMarker">2012</div><div class="yearMarker">2013</div><div class="yearMarker">2014</div><div class="yearMarker">2015</div><div class="yearMarker">2016</div><div class="yearMarker">2017</div><div class="yearMarker">2018</div><div class="yearMarker">2019</div>

<!-- End Year Markers -->           

        </div>
    </div>    

</aside>

CSS：

/*---------- Start Timeline 2 ---------*/

.timeContainer { position: fixed; width: 100px; height: 90%; margin: 2% 0% 5% 0%; top: 0px; right: 30px; overflow:hidden;}

 .timeHolder { position: absolute; width: 100px; margin: 50px 0px 50px 0px; top: 0px; left: 0px;}

.timeView { position:absolute; width: 100px; height: 28105px; max-height: 28105px; top: 0px; left: 0px; background-image:url(../img/longTimeBG3.png); background-repeat:repeat-y; background-position: top left; z-index: 90;; 
}



/*---------- End Timeline 2 ---------*/

--------------------------编辑添加另一个问题---------------- ------------

好的我有这个doc ready动画，将timeView div移动到2011年（或-24820 px up）

现在滚动位置现在设置在2011年的顶部，不会再向上滚动

这是脚本init动画：

$('.timeView').animate({         
        easing: 'easeInExpo',
        top: '-=24820px',
}, 10000);

Answer 1

你的

position : absolute;

与滚动相冲突...你真的需要它是绝对的吗？尝试设置

position : relative

到你的内部div，如同这个小提琴：http://jsfiddle.net/GSzZw/27/关键是让你的timeView高度大于你的timeHolder高度（两个高度都必须设置）并添加

overflow-y : scroll;

或

overflow-y : auto;

-----编辑------ 如果您更改“顶部”值，不就可以向上滚动。

如果你想滚动到特定的地方，请使用jQuery的scrollTop并看看这个小提琴： http://jsfiddle.net/GSzZw/48/

动画使用：

$(document).ready(function() {
    $(".timeHolder").animate({         
        scrollTop: '24800',
     }, 10000);
});

而不是：

$(document).ready(function() {
    $(".timeHolder").scrollTop(24800);
});

希望有所帮助。

Answer 2

JQuery Scrollable是最好，最简单的解决方案。

http://jquerytools.org/download/

其他解决方案是ScrollTo插件。

Answer 3

加入你的CSS

overflow: auto;

在你的div上你想要滚动条。

如何在此div上添加滚动？

3 个答案: