• 締切済み

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

拾ったソースを改造しようとしているのですが 知識がない為うまくいきません。 divの中のsample1～10を横に並べて、改行なしの横スクロールにしたいです。 今は縦スクロールです。 どこを直せばいいのか教えてくださいm(_ _)m ―――――――――――――――――― <SCRIPT language="JavaScript"> <!-- var SmoothScroll = {}; SmoothScroll = { targetScrollTop : 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.scrollTopMax = this.$(parent).scrollHeight - this.$(parent).offsetHeight + parseInt(this.$(parent).style.borderTopWidth) + parseInt(this.$(parent).style.borderBottomWidth); if( navigator.userAgent.match( "MSIE" ) ){ this.targetScrollTop = ( element ) ? this.$(element).offsetTop : 0; }else{ var targetOffsetTop = ( element ) ? this.$(element).offsetTop : this.$(parent).offsetTop; this.targetScrollTop = targetOffsetTop - this.$(parent).offsetTop; } this.targetScrollTop = ( this.targetScrollTop > this.scrollTopMax ) ? this.scrollTopMax : this.targetScrollTop; this.dist = this.targetScrollTop - this.$(parent).scrollTop; this.lastDist = 0; this.timer = setInterval('SmoothScroll.update()', this.options.unit ); this.count = 0; //this.speedStore = []; this.update(); }, update : function(){ var dist = this.targetScrollTop - this.$(this.parentid).scrollTop; 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).scrollTop = this.targetScrollTop; return; }else if( this.lastDist == dist ){ // stuck clearInterval( this.timer ); this.$(this.parentid).scrollTop = this.targetScrollTop; return; } var scrollTop = this.$(this.parentid).scrollTop + speed; this.$(this.parentid).scrollTop = scrollTop; this.lastDist = dist; this.count++; if( this.count == this.options.time / this.options.unit ){ // timeout clearInterval( this.timer ); this.$(this.parentid).scrollTop = this.targetScrollTop; } }, $ : function(id) { return document.getElementById(id); } } --> </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');"/>

みんなの回答

回答No.3

＞どうせ拾ったソースなら捨ててしまって う～～～ん。めいげんかも^^;

回答No.2

<!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ようそをつくって みたいな・・・？ でもせんたーはおかしい あとはたにんまかせ？^^; ばぶぅ～

u-ma0810
質問者

補足

ありがとうございます！ 実はこれ会社のページを作ろうとしているのですが、 急遽別の作業を言い付けられて目が回っています…(@Д@) 時間はかかりそうですがいただいた意見を元に頑張ってみます。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

どうせ拾ったソースなら捨ててしまって、別のを使ったらいかがでしょう。 例えば、なめらかスクロール「tinyscrol」 http://pub.ne.jp/tsuchan/?entry_id=317594

u-ma0810
質問者

補足

なるほど。 ほぼ１日探し求めてようやく見付かったそれらしいのがコレだったもので… ありがとうございます、さっそく見てみます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScriptのプログラムについて

    $(function(){ $("#top a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#question a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#q001 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#q002 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#q003 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#q004 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) }); ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HTMLは少し分かりますが JavaScriptがまったく分からない素人です。 ネットで調べて上記のようにプログラムし ページ内リンクを流れるようにスクロールさせることは出来ました。 まずこのプログラムの書き方で合っていますでしょうか？ また、同じ記述が繰り返されているので短くしてやろうと自分なりに $("#q001 a") $("#q002 a") $("#q003 a") $("#q004 a") $("#q005 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) ↑のような全くの当て推量の書き方をしてみましたが動作しませんでした。 省略したり短く出来る余地があればそれも教えていただきたいです。 分かる方がおられましたらお願いします。

  • スムーズスクロールとfleXcrollの併用

    よろしくお願い致します。 jQueryを使用して、「overflow: auto」を指定している要素内でスムーズスクロール出来る方法を探しており、以下のようなコードを見つけました。 $(document).ready(function(){ var box = $('#contents'); $(document).click(function(event){ var obj = $(event.target); var anchor = obj.filter('a[href*="#"]'); if (!anchor[0]) anchor = obj.parents('a[href*="#"]'); if (anchor[0]){ var target = $(anchor[0].hash, box); if (target[0]){ var scrollTop = box.scrollTop(); var dist1 = box.prop('scrollHeight') - box.prop('clientHeight') - scrollTop; var dist2 = target.position().top - box.position().top; box.animate({ scrollTop: scrollTop + Math.min(dist1, dist2)}); return false; } } return true; }); }); ↑このコードで「overflow:auto;」を指定している要素内でスムーズスクロールが出来るようになったのですが、スクロールバーを装飾できる「fleXcroll（http://shanabrian.com/web/library/flexcroll.php）」プラグインと併用すると、スムーズスクロールが効かなくなってしまいます。 「fleXcroll」のコードは「http://www.hesido.com/web/flexcroll.js」になる（記述が長くここには書ききれませんでした）のですが、薄識のため何処に問題があるのか分からない状態です。 ちなみにHTMLは、下記のようなコードで使用しています。 <div id="navi"> 　<ul> 　　<li><a href="#A">divAへ移動</a></li> 　　<li><a href="#B">divBへ移動</a></li> 　　<li><a href="#C">divCへ移動</a></li> 　　<li><a href="#D">divDへ移動</a></li> 　　<li><a href="#E">divEへ移動</a></li> 　</ul> </div> <div id="hoge" style="height:500px; overflow:auto;"> 　<div id="A">divAの内容</div> 　<div id="B">divBの内容</div> 　<div id="C">divCの内容</div> 　<div id="D">divDの内容</div> 　<div id="E">divEの内容</div> </div> 分かりにくい説明で恐れ入ります。 補足説明致しますので、お分かりになる方がいらっしゃいましたら、どうかご教授下さいますようお願い致します。

  • 外部ページからハッシュタグ（＃）のリンクへ正しく飛ばない

    外部のページから、ハッシュタグを加えたURLを指定し 自分のページの指定した箇所を表示させたいのですが、 正しい位置に飛びません。 ・自分のページの指定箇所　<div id="■■■"> ・外部ページのリンク指定　a href="http://○○○○○.jp/#■■■" ちなみに、自分のページは基本indexのみで、 ものすごく長く、 ハッシュタグを使ったjava scriptのページスクロールで 指定箇所を行き来できるようにしています。 <script type="text/javascript"> jQuery.fn.extend({ scrollTo : function(speed, easing) { <!-- hashの取得が出来なければ、処理を中断 --> if(!$(this)[0].hash || $(this)[0].hash == "#") { return false; } return this.each(function() { var targetOffset = $($(this)[0].hash).offset().top; $('html,body').animate({scrollTop: targetOffset}, speed, easing); }); } }); $(document).ready(function(){ $('a[href*=#]').click(function() { $(this).scrollTo(1200); return false; }); }); </script> これが原因なのかわかりませんが、 現状、外部からリンクした場合は、 ページ上部の<div id="□□□">には正しく飛びますが、 何故か、ページ下部の<div id="■■■">になると すべてページ最下部に飛ばされてしまいます。 原因分かる方、いらっしゃいませんでしょうか。。

  • Jqueryでリストのスクロール

    <ul><li></li></ul>にて作成したリストで選択した行の背景色を変更し、選択した行が リストの先頭にスクロールするするサンプルを試しに作成してみました。 Jqueryを使用して下記のように作成してみましたが選択行がリストの先頭にうまくスクロールしずに 微妙な位置までスクロールして止まってしまいます。うまくリストの先頭に来るようにスクロールさせる にはどのようにすればよろしいでしょうか。 【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.update-scroll li").click(function() { $("ul.update-scroll li").each(function(){ // 既に選択済の場合、選択を解除 if( $(this).hasClass("selected") ) { //alert( $(this).text() ); $(this).toggleClass("selected"); } }); // 選択済に変更 $(this).toggleClass("selected"); // 選択済の位置がリストの先頭に来るようにスクロール //var i = $(this).index(); var p = $(this).offset().top; //alert(p); $("ul.update-scroll").animate({ scrollTop: p }, "fast"); }); }); </script> <title>CSS</title> <style type="text/css"> ul.update-scroll { list-style-type: none; width: 400px; height: 100px; overflow-y: scroll; border: 2px solid #bbb; padding-left: 1.5em; } ul.update-scroll li { margin-top: 0.3em; } ul.update-scroll li.selected { background:red; } ul.update-scroll a { text-decoration: none; } </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <ul class="update-scroll"> <li>[2010/01/03]： <a href="javascript:void(0);">項目10</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目9</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目8</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目7</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目6</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目5</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目4</a></li> <li>[2010/01/03]： <a href="javascript:void(0);">項目3</a></li> <li>[2010/01/02]： <a href="javascript:void(0);">項目2</a></li> <li>[2010/01/01]： <a href="javascript:void(0);">項目1</a></li> </ul> </body> </html>

  • クリックするとするするとスクロールさせたい(JS)

    Javascript勉強中です。 画像のリンクをクリックすると、同一ページ内の任意の場所までするすると、 スクロールするような機能を作成したいのです。 現状、通常のaタグでくくったリンクであれば、実現できています。 ■HTML <a href="#top"><div><img src="./img/naviHome.png" name="home"></div></a> <a href="#recruit"><div><img src="./img/naviRecruit.png" name="recruit"></div></a> <a href="#priceList"><div><img src="./img/naviPriceList.png" name="priceList"></div></a> ■javascript <script type="text/javascript"> <!-- //aリンクをクリックすると、同一ページ内の任意のnameタグまでするするとスクロールする $('a[href^=#]').click(function() { // スクロールの速度 var speed = 800; // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); --> </script> ここから、画像が選択されたことを示すために色をかえた画像に切り替えたいため、 下記のJavascriptを実行させたいのです。 //選択されたことを明示するため画像をいれかえる// document.home.src="./img/selectedHome.png" aリンクをなくして、以下のようにしてしまうと、「$('a[href^=#]').click(function() 」が動作しません。 うまく、するするとスクロールさせながら、画像を入れ替える処理ができないものでしょうか？ <a href="javascript: fncNaviLink('#top');"><div><img src="./img/naviHome.png" name="home"></div></a> function fncNaviLink(link) { document.home.src="./img/selectedHome.png" location.href = link; }

  • 個別では動く、javascriptのエラー

    こちらで良いのか悩みましたが..... blogやHPを作った事があるというだけで、webshopの作りを友人にお願いされた初心者です。 更新履歴用にFeed2JS、商品画像を表示する為にmootools、lightbox2をお借りして 設置までは何とか行う事が出来、個別ではちゃんと動いているのですが、同じページではどちらかが動かなくなってしまいました。 ブラウザにエラーコンソールを付けてみた所、mootoolsとrssにエラーがあると表示されていて、 どの行がエラーなのかは分かりましたが、情けない話ですが何がエラーなのかが分かりません。 javascriptは見よう見まねで設置しており、コードの書き換えなどは画像サイズを変更するぐらいがやっとです。 ネットや辞書で調べてみましたが、分からないまま弄ると余計におかしな事になり、怖くなってきました。 周りに詳しい人もおらず、困ってしまいましたので、検索でみつけたこちらでお伺いする事にした次第です。 エラー表示されるのは $(document).ready( function(){ $('.rss-items').innerfade({ animationtype: 'slide', speed: 750, timeout: 6000, type: 'sequence', containerheight: '1em' }); $('ul#portfolio').innerfade({ speed: 1000, timeout: 5000, type: 'sequence', containerheight: '220px' }); $('.fade').innerfade({ speed: 1000, timeout: 6000, type: 'random_start', containerheight: '1.5em' }); $('.adi').innerfade({ speed: 'slow', timeout: 5000, type: 'random', containerheight: '150px' }); }); の3行目 $('.rss-items').innerfade({ 長いので直接アドレスを貼ります http://pretto.kilo.jp/cos-pretto/js/mootools-1.2-core.js 345行目 Fx.Slide=new Class({Extends:Fx,options:{mode:'vertical'},initialize:function(a,b){this.addEvent('complete',function(){this.open=(this.wrapper['offset'+this.layout.capitalize()]!=0);if(this.open&&Browser.Engine.webkit419)this.element.dispose().inject(this.wrapper)},true);this.element=this.subject=$(a);this.parent(b);var c=this.element.retrieve('wrapper');this.wrapper=c||new Element('div',{styles:$extend(this.element.getStyles('margin','position'),{'overflow':'hidden'})}).wraps(this.element);this.element.store('wrapper',this.wrapper).setStyle('margin',0);this.now=[];this.open=true},vertical:function(){this.margin='margin-top';this.layout='height';this.offset=this.element.offsetHeight},horizontal:function(){this.margin='margin-left';this.layout='width';this.offset=this.element.offsetWidth},set:function(a){this.element.setStyle(this.margin,a[0]);this.wrapper.setStyle(this.layout,a[1]);return this},compute:function(a,b,c){var d=[];var x=2;x.times(function(i){d[i]=Fx.compute(a[i],b[i],c)});return d},start:function(a,b){if(!this.check(arguments.callee,a,b))return this;this[b||this.options.mode]();var c=this.element.getStyle(this.margin).toInt();var d=this.wrapper.getStyle(this.layout).toInt();var e=[[c,d],[0,this.offset]];var f=[[c,d],[-this.offset,0]];var g;switch(a){case'in':g=e;break;case'out':g=f;break;case'toggle':g=(this.wrapper['offset'+this.layout.capitalize()]==0)?e:f}return this.parent(g[0],g[1])},slideIn:function(a){return this.start('in',a)},slideOut:function(a){return this.start('out',a)},hide:function(a){this[a||this.options.mode]();this.open=false;return this.set([-this.offset,0])},show:function(a){this[a||this.options.mode]();this.open=true;return this.set([0,this.offset])},toggle:function(a){return this.start('toggle',a)}}); です。 マヌケな質問かもしれませんが、参考になるページだけでも教えて頂けると凄く嬉しいです。

  • JavaScriptでのフレーム間の値の受け渡し

    はじめまして。 JavaScriptでのフレーム間の値の受け渡しについて、お聞きしたいと思っています。 ・下記left.htmでは、リストボックスから画像名を選択します。 <script type="text/javascript"> <!-- function sample(image1){ parent.fuseaction = image1; location.href="right.htm"; var image1 image1 = image1.jpg image2 = image2.jpg } // --> </script> <body> 下記の画像を選択してください。 <p><select> <option value="0"></option> <option value="image1" selected>画像1</option> <option value="image2">画像2</option> </select></p> </p> <p><input type="button" value="ボタン" name="B3" onClick="sample(image1);"> </p> <p><a href="main.htm" target="main">sample</a> </p> <p>　 </p> </body> </html> ・下記right.htmでは、画像名を表示します。 <script type="text/javascript"> <!-- function sample(image1){ } src="sample(image1)" まだ、初心者のため、みなさまに教えて頂きたいと思います。 よろしくお願いします。

  • iframeの中から親ページをスムーズスクロール

    タイトルどおり、iframeの中から親ページをスムーズスクロールしたいと考えています。 ヘッダに <script> $(function() { var topBtn = $('#toTop'); topBtn.click(function () { parent.$('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> 親ページには高さ3000ピクセルのiframeを作って、そこに読み込んでいる子ページ最下部に <div id="gotoTop"><a href="#top_page"><img src="_image/btn_top.jpg" alt="トップに戻る" /></a></div> と記述しています。 この状態で親ページをスムーズスクロールさせることができません。 事情があって、親ページ側にはスクリプトやタグを追加することができません。 親も子もおなじドメインにあります。 ["parent" $('body,html') animate]などのキーワードで検索した記事を参考に parent.$('body,html').animate を window.parent.$("body").animate や $('html, body', window.parent.document).animate に書き換えてみてもうまくいきませんでした。 どうかアドバイスをお願いいたします。

  • JavaScript　フレーム内のインラインフレームへのリンク

    こんにちは JavaScriptを使って、セレクトメニューのリストから選択すると、同ページ内にあるインラインフレームにページが展開するようにしたいのですが行き詰ってしまったので質問させてください。 ・問題点 下記のようにJavaScriptの記述をしているのですが ブラウザで開いて見ると、「更新情報6月」などを選択しても、もともと開いているページが表示されたままで別のページが開きません。 ・ファイル構成 index.html(フレームセット） 　－menu.html（フレーム名　menu） 　－main.html（フレーム名　main） 　new.html(indexを開いた時に表示されているページ） 　new6.html（更新情報6月をクリックすると開いてほしいページ） 　new5.html（更新情報5月をクリックすると開いてほしいページ） main.htmlの中にインラインフレーム(name＝myNew) とセレクトメニューがあります。 こちらの過去ログを見たりして記述することが出来たのですが、main.htmlを単体で開いた場合は動作してindex.htmlで開いた場合は動作しないようなのです 「parent.myNew.」がいけないのかなと思うのですが JavaScriptの細かいことが分からないので どうしたら良いのか・・・ parentを消したり、thisにしたりしてみたんですが うまくいきませんでした。 どなたかアドバイスをお願いいたします ----- 記述内 ------------ <select onChange="parent.myNew.location.href=this.options[this.selectedIndex].value"> <option value="" selected></option> <option value=new6.html>更新情報6月</option> <option value=new5.html>更新情報5月</option> </select> <iframe src="new.html" name="myNew" width="250" height="400"></iframe>

  • 横スクロールを縦スクロールに変換したい

    ちょっと違うのですが、こちらのサイトをご覧ください。 http://www.rinkokikuchi.com/# このサイトでは横スクロールデザインですが、マウスの縦スクロールをしても横にスクロールできるようになっています。 私が今困っているのはパララックスを使った縦スクロールのサイトを作っているのですが、 マウスのホイールを横にスクロールした際にもサイトを縦にスクロールできる様にしたいのですが、分かりません。 縦横どちらでもスクロールできる様にしたいです。 どなたか教えて頂けませんでしょうか。

    • 締切済み
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する