0

我需要能够滚动的 div 是timeViewdiv：我需要它在 timeholder div 中滚动，最好有一个自定义滚动条，但这不是必需的。我已经尝试过插件和 css 解决方案，但没有一个可用。我最好在 jquery 中寻找解决方案...

<aside class="timeContainer">
    <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：

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

.timeHolder { position: absolute; 
    height: 80%;
    overflow-y: scroll;
    width: 120px;
    margin: 50px 0px 50px 0px; 
    top: 0px; 
    left: 0px;}

.timeView { position:relative; 
    width: 100px; 
    height: 28105px; 
    max-height: 28105px; 
    top: 0px; 
    left: 0px; 
    background-image : url(http://ccl.northwestern.edu/extensions/palette/rgb-color-scale-gradient.png);
 background-repeat:repeat-y; 
    background-position: top left; 
    z-index: 90;; 
}

.yearMarker { position:relative; 
    z-index: 91; 
    top:0px; 
    right: 0px; 
    width: 95px; 
    height: 365px; 
    text-align:right; 
    font-family:Verdana, Geneva, sans-serif; 
    font-weight:bold; 
    color: #000; }

--------------------------下一期 ---------- ------

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

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

这是初始化动画的脚本：

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

1 回答 1

0

设置top: '-=24820'与文字滚动不同。如果您想对其进行动画处理，请为我相信的 scrollTop 属性设置动画。 

$('#yourDiv').animate({
    scrollTop: -24820
}, 2000);

类似的东西我不太确定语法，但实际上会滚动元素，这将允许您在之后正常鼠标滚动。基本上是 top<>scrollTop

更新：

如果您尝试正确的 div 会有所帮助：P。TimeView 不是正在滚动的 div。此外，请使用正的 scrollTop 值，因为这与向下滚动滚轮鼠标相同。您显然根本没有试图弄清楚这一点，您只是尝试将我的解决方案复制并粘贴到您的解决方案中。下次请尝试考虑所提供的解决方案如何适用于您的特定问题。无论如何，这里是：

$('.timeHolder').animate({         
    scrollTop: 24820,
}, 10000);
于 2012-08-20T16:57:11.177 回答