レッド ■ ワン: 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

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