追記 at 2008.Sep.04
Firefoxで Ctrl + PgDn(or PgUp) 時にタブ移動と共にスクロールしてしまう不具合修正．
その他に，
- Shift, Ctrl, Altキー押下時の処理を追加．
- Home, End キーに対応
上記対応のコード修正． 同様にソースファイルも修正しました．
追記 at 2008.Sep.02
修正ミスを修正．
コードも修正． ソースファイルも修正しました．
実験的に横長デザインに変更しようかと思いまして，ユーザビリティを考慮して，まずマウススクロール時に横スクロールするスクリプトを実装してみました．
参考
マウスホイールで横スクロール
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
参考までに上記のスクリプトを纏めてファイル化したものを以下に置きます．
補足
Fx1.5-3.0, IE6, Opera, Safari3.0 at WinXP にて動作確認しております．
ブログデザイン自体は記事毎に横並びにする
予定ですが，実際に上記のコードを使用する場合は縦方向のスクロールが必要になった場合の考慮をする必要があります．
基本，長文を読ませる（自分のような）ブログには向いてない．
ちなみに，デザインはコチラを参考にする予定． ＞＞
NonSociety: Julia ちなみの因みに，あくまで
予定．
