レッド ■ ワン: red-one

Javascript で横スクロールするスクリプトのサンプルを以下に掲載．
CSS オン，Javascript オンの環境でアクセスしてください．

• http://akanasu.googlepages.com/vscroll_sample.html

　実験的に横長デザインに変更しようかと思いまして，ユーザビリティを考慮して，まずマウススクロール時に横スクロールするスクリプトを実装してみました．

参考

• JavaScriptでマウスホイールイベントを扱い、スクロールも停止する方法:phpspot開発日誌

マウスホイールで横スクロール

function handle(delta) {
 if (delta < 0) {
  // 下方向にまわした場合の処理
 } else {
  // 上方向にまわした場合の処理
 }
 window.scrollBy(-delta*120, 0);
}

/** Event handler for mouse wheel event.
 */
function wheel(event){
 var delta = 0;
 if (!event) { /* For IE. */
  event = window.event;
 }
 //Shiftキー Cｔｒｌキー押下時
 var altK = typeof event.modifiers == 'undefined' ? event.altKey : event.modifiers & event.ALT_MASK;
 var ctrlK = typeof event.modifiers == 'undefined' ? event.ctrlKey : event.modifiers & event.CONTROL_MASK;
 var shiftK = typeof event.modifiers == 'undefined' ? event.shiftKey : event.modifiers & event.SHIFT_MASK;
 if (shiftK|ctrlK) { return true; }

 // テキストボックス上では通常のスクロール動作
 var isTextArea = false;
 var target = event.target||event.srcElement;
 if (target && target.nodeName.match (/input|textarea/i) && target.type.match (/textarea/i)) {
  isTextArea = true;
 }
 if (isTextArea) {
  return true;
 }

 if (event.wheelDelta) { /* IE/Opera. */
  delta = event.wheelDelta/120;
  if (window.opera) { delta = -delta; }
 } else if (event.detail) { /* Mozilla case. */
  delta = -event.detail/3;
 }
 /** If delta is nonzero, handle it.
  * Basically, delta is now positive if wheel was scrolled up,
  * and negative, if wheel was scrolled down.
  */
 if (delta) {
  handle(delta);
 }
 if (event.preventDefault) { event.preventDefault(); }
 if (event.returnValue) { event.returnValue = false; }
 return false;
}

/** Initialization code. 
 * If you use your own event management code, change it as required.
 */
if (window.addEventListener) { window.addEventListener('DOMMouseScroll', wheel, false); }
//else if (window.attachEvent) { document.attachEvent('onmousewheel', wheel); }
window.onmousewheel = document.onmousewheel = wheel;

リンク先のコードをいくらか修正したものです．　修正箇所は一々説明しません．
あと，テキストボックス上では横スクロールしないようにしています．

PageDown, PageUp キー押下時に横スクロール

function KeyShirtcuts(event) {
 if (!event) { /* For IE. */
  event = window.event;
 }
 // Altキー　Ctrlキー押下時
 var altK = typeof event.modifiers == 'undefined' ? event.altKey : event.modifiers & event.ALT_MASK;
 var ctrlK = typeof event.modifiers == 'undefined' ? event.ctrlKey : event.modifiers & event.CONTROL_MASK;
 if (altK|ctrlK) { return true; }

 var isTextArea = false;
 var target = event.target||event.srcElement;
 if (target && target.nodeName.match (/input|textarea/i) && target.type.match (/textarea/i)) {
  isTextArea = true;
 }
 if (isTextArea) {
  return true;
 }
 switch (event.keyCode) {
 case 33 : //PgUp
  window.scrollBy(-document.documentElement.clientWidth, 0); break;
 case 34 : //PgDw
  window.scrollBy(document.documentElement.clientWidth, 0); break;
 "case 35 : //End
  window.scrollTo(window.scrollMaxX|document.body.scrollWidth, 0); break;
 case 36 : //Home
  window.scrollTo(0, 0); break;
 default: return true;
 }
 if (event.preventDefault) { event.preventDefault(); }
 if (event.returnValue) { event.returnValue = false; }
}
if (window.addEventListener) { window.addEventListener('keydown', KeyShirtcuts, false); }
else { document.attachEvent('onkeydown', KeyShirtcuts); }

IE では'keypress'イベントで PgDn, PgUp キーは拾ってくれないようなので'keydown'イベントで．
同様に，テキストボックスにフォーカスがあるときは横スクロールしないようにしています．

vscroll.js

　参考までに上記のスクリプトを纏めてファイル化したものを以下に置きます．

• http://akanasu.googlepages.com/vscroll.js

補足

　Fx1.5-3.0, IE6, Opera, Safari3.0 at WinXP にて動作確認しております．
　ブログデザイン自体は記事毎に横並びにする予定ですが，実際に上記のコードを使用する場合は縦方向のスクロールが必要になった場合の考慮をする必要があります．
　基本，長文を読ませる（自分のような）ブログには向いてない．
　ちなみに，デザインはコチラを参考にする予定．　＞＞NonSociety: Julia

　ちなみの因みに，あくまで予定．

ヒトより絵がうまくなりたい

誰よりも絵がうまくなりたい

美的感覚を研ぎ澄ませたい


どんなツールも使いこなしたい

むしろ　ツールなんて要らない


ボーナスも給料も残業代も要らない

ただ　本物の能力が欲しい




耳が聞こえなくなってもいい

二度と喋れなくなってもいい

色彩だけは失いたくない

CSS3 の Target 擬似クラスというものを IE，Opera に実装するスクリプトです．
Target 擬似クラスについてはこちらを参考に．

• Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する

# ざっくり説明しようと思ったら意外と難しかったので省きます．
# リンク先を見てちょ

CSS3 で定義されている Target擬似クラスは IE と Opera では実装されていません．　上記エントリィ内でも Javascript で実現するスクリプトが紹介されてますが，スクリプトが読みづらい＋意味不明な処理が多いので抜本的に作り直してみました．

sfTarget.js: IE，Opera に Target 擬似クラスを実装するスクリプト

JS ファイル

　コメントを削ったちょい軽量版です．

• http://akanasu.googlepages.com/sftarget.js

HTML に埋め込む際は head 要素内に以下の１行を挿入してください．

<script type="text/javascript" src="http://akanasu.googlepages.com/sftarget.js"></script>

ソースコード

function sfTarget () {
 var cls = 'sftarget'; //クラス名
 if (document.location.hash) {
  var id = document.location.hash.substring(1);
  var elm= document.getElementById(id);
  if (elm) { elm.className += ' '+cls; }
 }
 for (var i=0; i < document.links.length; i++) {
  if (document.links[i].hash == '') { continue; }
  document.links[i].attachEvent('onclick', function (event) {
   //前Target要素からクラス削除
   if (document.location.hash) {
    var id = document.location.hash.substring(1);
    var elm= document.getElementById(id);
    if (elm) { elm.className = elm.className.replace(' '+cls, ''); }
   }
   //Traget要素にクラス追加
   var id = event.srcElement.hash.substring(1);
   var elm= document.getElementById(id);
   if (elm) { elm.className += ' '+cls; }
  });
 }
}
if (window.attachEvent) { window.attachEvent('onload', sfTarget); }

CSS 指定方法に関して

　因みに，CSS の指定方法としては

div.sftarget,
div:target {
 /* (IE?), Opera ではここのスタイル指定は無視されます */
 background: #0ff;
}

のようにグループ化して書けませんのでご注意ください．

div:target {
 background: #0ff;
}
div.sftarget {
 background: #0ff;
}

と，同じスタイルでも分けて記述しましょう．
理由としてはこちらの「説明」部分に詳しく説明されています．

• Firefox 1.0, 1.5, 3.0 用の CSS ハック | ヨモツネット

:target が対応していないからですね．

リファレンス

• Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する
• Lucky bag::blog: ピュア CSS なプレゼン用スライドショー
• Suckerfish :target | HTML Dog
• :target 疑似クラスでごにょごにょの解 - USOperaION／ε∂.∂з＼ - チーム俺等