1

スクロールする機能が必要な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 ---------*/

--------------------------編集-に別の問題を追加------------------- ---------

わかりました。timeViewdivを2011年まで（または-24820ピクセル上）移動するこのドキュメント対応アニメーションがあります。

これで、スクロール位置は2011年に一番上に設定され、これ以上スクロールしなくなります。

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

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

3 に答える 3

4

あなたの

position : absolute;

巻物と衝突しています...あなたは本当にそれが絶対的である必要がありますか？設定してみてください 

position : relative

このフィドルのように内部divに：http：//jsfiddle.net/GSzZw/27/重要なのは、timeViewの高さをtimeHolderの高さよりも大きくすることです（両方の高さを設定する必要があります）。

overflow-y : scroll;

また

overflow-y : auto;

-----編集------ 「top」の値を変更すると上にスクロールできなくなります。

特定の場所にスクロールしたい場合は、jQueryのscrollTopを使用して、このフィドルを見てください：http: //jsfiddle.net/GSzZw/48/

使用をアニメーション化するには：

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

それ以外の ：

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

</ p>

お役に立てば幸いです。

于 2012-08-20T15:41:21.597 に答える
0

JQuery Scrollableは、最良かつ最も簡単なソリューションです。

http://jquerytools.org/download/

他の解決策はScrollToプラグインです。

于 2012-08-20T15:03:54.007 に答える
0

あなたのCSSを入れてください

overflow: auto;

divにスクロールバーが必要です。

于 2012-08-20T15:17:02.077 に答える