javascriptによるスクロールを縦から横に変換したい

締切済

質問者：u-ma0810
質問日時：2009/09/18 14:28
回答数：3件

拾ったソースを改造しようとしているのですが
知識がない為うまくいきません。

divの中のsample1～10を横に並べて、改行なしの横スクロールにしたいです。
今は縦スクロールです。
どこを直せばいいのか教えてくださいm(_ _)m

――――――――――――――――――
<SCRIPT language="JavaScript">

</script>
<div id="scrolltop" style="width: 750px; height: 200px; overflow-x: scroll; overflow-y: scroll; border: 1px black solid;">
<a href="sample1">1</a>
<a href="sample2">2</a>
<a href="sample3">3</a>
<a href="sample4">4</a>
<span id="middle" style="color: red">
<a href="sample5">5</a>
</span>
<a href="sample6">6</a>
<a href="sample7">7</a>
<a href="sample8">8</a>
<a href="sample9">9</a>
<span id="bottom" style="color: blue">
<a href="sample10">10</a>
</span><br />
</div>
<input type="button" value="go to top" onclick="SmoothScroll.scrollTo(0,'scrolltop');"/>
<input type="button" value="go to middle" onclick="SmoothScroll.scrollTo('middle','scrolltop');"/>
<input type="button" value="go to bottom" onclick="SmoothScroll.scrollTo('bottom','scrolltop');"/>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： babu_baboo
回答日時：2009/09/18 15:52

＞どうせ拾ったソースなら捨ててしまって

う～～～ん。めいげんかも^^;

- 0
- 件

通報する

No.2

回答者： babu_baboo
回答日時：2009/09/18 15:49

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<title></title>
<style type="text/css">
a { padding:40px; }
</style>
<div id="scrollLeft" style="width: 750px; height: 200px; overflow-x: scroll; overflow-y: scroll; border: 1px black solid;">
<div style="width: 1000px; height: 200px;">
<a href="sample1">1</a>
<a href="sample2">2</a>
<a href="sample3">3</a>
<a href="sample4">4</a>
<span id="middle" style="color: red">
<a href="sample5">5</a>
</span>
<a href="sample6">6</a>
<a href="sample7">7</a>
<a href="sample8">8</a>
<a href="sample9">9</a>
<span id="bottom" style="color: blue">
<a href="sample10">10</a>
</span>
</div>
</div>
<input type="button" value="go to top" onclick="SmoothScroll.scrollTo(0,'scrollLeft');"/>
<input type="button" value="go to middle" onclick="SmoothScroll.scrollTo('middle','scrollLeft');"/>
<input type="button" value="go to bottom" onclick="SmoothScroll.scrollTo('bottom','scrollLeft');"/>

<script type="text/javascript">

var SmoothScroll = {
　targetScrollLeft : 0,
　dist : 0,
　timer : 0,
　count : 0,
　parentid : 0,
　lastDist : 0,
　//speedStore : [],
　options : {},
　defaultOptions : {
　　time : 1*1000,
　　unit : 50
　},
　scrollTo : function( element, parent, options ){
　　this.options.time = this.defaultOptions.time;
　　this.options.unit = this.defaultOptions.unit;
　　if( options ){
　　　this.options.time = ( options.time ) ? options.time : this.options.time;
　　　this.options.unit = ( options.unit ) ? options.unit : this.options.unit;
　　}
　　clearInterval( this.timer );
　　this.parentid = parent;

　　this.scrollLeftMax = this.$(parent).scrollWidth - this.$(parent).offsetWidth + parseInt(this.$(parent).style.borderLeftWidth) + parseInt(this.$(parent).style.borderBottomWidth);

　　if( navigator.userAgent.match( "MSIE" ) ){
　　　this.targetScrollLeft = ( element ) ? this.$(element).offsetLeft : 0;
　　}else{
　　　var targetOffsetLeft = ( element ) ? this.$(element).offsetLeft : this.$(parent).offsetLeft;
　　　this.targetScrollLeft = targetOffsetLeft - this.$(parent).offsetLeft;
　　}
　　this.targetScrollLeft = ( this.targetScrollLeft > this.scrollLeftMax ) ? this.scrollLeftMax : this.targetScrollLeft;

　　this.dist = this.targetScrollLeft - this.$(parent).scrollLeft;
　　this.lastDist = 0;
　　this.timer = setInterval('SmoothScroll.update()', this.options.unit );
　　this.count = 0;
　　//this.speedStore = [];
　　this.update();
　},
　update : function(){
　　var dist = this.targetScrollLeft - this.$(this.parentid).scrollLeft;
　　var speed = 2 * dist * this.options.unit / ( this.options.time - this.options.unit * this.count );
　　//this.speedStore.push( speed );
　　speed = ( speed > 0 ) ? Math.ceil( speed ) : Math.floor( speed );
　　if( Math.abs(dist) <= Math.abs(speed) ){
　　　// got there
　　　clearInterval( this.timer );
　　　this.$(this.parentid).scrollLeft = this.targetScrollLeft;
　　　return;
　　}else if( this.lastDist == dist ){
　　 // stuck
　　　clearInterval( this.timer );
　　　this.$(this.parentid).scrollLeft = this.targetScrollLeft;
　　　return;
　　}
　　var scrollLeft = this.$(this.parentid).scrollLeft + speed;
　　this.$(this.parentid).scrollLeft = scrollLeft;
　　this.lastDist = dist;
　　this.count++;
　　if( this.count == this.options.time / this.options.unit ){
　　　// timeout
　　　clearInterval( this.timer );
　　　this.$(this.parentid).scrollLeft = this.targetScrollLeft;
　　}
　},
　$ : function(id) {
　　return document.getElementById(id);
　}
}
</script>
Top というのは、Leftに
Height というのは Width に
id="scrollLeft"のなかにdivようそをつくって
みたいな・・・？
でもせんたーはおかしい
あとはたにんまかせ？^^;
ばぶぅ～