0

スクロールする機能が必要な div はtimeViewdiv です。タイムホルダー 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 px 上) に移動するこのドキュメント対応アニメーションがあります。

現在、スクロール位置は 2011 年に一番上に設定されており、それ以上スクロールしません。

アニメーションを開始するスクリプトは次のとおりです。

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

1 に答える 1

0

設定top: '-=24820'は文字通りのスクロールと同じではありません。アニメーション化する場合は、scrollTop プロパティをアニメーション化すると思います。 

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

構文についてはよくわかりませんが、実際に要素をスクロールすると、通常のマウススクロールが可能になります。基本的にはトップ<>スクロールトップ

アップデート：

正しい div :P を試すと役立ちます。TimeView は、スクロールされている div ではありません。また、正の scrollTop 値を使用してください。これは、ホイール マウスを下に動かした場合と同じになるからです。あなたは明らかにこれを理解しようとさえしませんでした。私のソリューションをコピーしてあなたのソリューションに貼り付けようとしただけです。次回は、提供されたソリューションが特定の問題にどのように適用されるかを考えてみてください. とにかく、ここにあります：

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