Monday, September 29, 2008

横スクロールのサンプルページ

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

Monday, September 01, 2008

横スクロールするスクリプト ~横長デザインの為に~

追記 at 2008.Sep.04
Firefoxで Ctrl + PgDn(or PgUp) 時にタブ移動と共にスクロールしてしまう不具合修正.
その他に,
  • Shift, Ctrl, Altキー押下時の処理を追加.
  • Home, End キーに対応

上記対応のコード修正. 同様にソースファイルも修正しました.
追記 at 2008.Sep.02
修正ミスを修正.
  • Safariでスクロールイベントが動かない不具合

コードも修正. ソースファイルも修正しました.

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

参考

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


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キー 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;
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

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

補足

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

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

Template Design. 2008 Jyun.