jquery - 如何在这个 div 上添加滚动？

Question

我需要能够滚动的 div 是：我需要它在 timeholder 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 ---------*/

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

好的，我有这个准备好的动画，将 timeView div 移动到 2011 年（或 -24820 像素）

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

这是初始化动画的脚本：

$('.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);
});    

​ ​</p>

希望有帮助。

Answer 2

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

http://jquerytools.org/download/

其他解决方案是 ScrollTo 插件。

Answer 3

放入你的CSS

overflow: auto;

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