任意のエレメントが画面上に表示されるようにScrollTopを調整する関数

用途・目的

スクロール可能なエレメント内部の任意のエレメントが画面に表示されるようにscrollTopを調整する関数
Chromeなどのブラウザで動くかは未確認。htaで使っています。

ソース ;(function(){ // 指定したエレメントが画面上に表示されるように、scrollTopの値を調整する関数。 var getSum=function(elem, param){ var sum=0; while(elem){ sum+=elem[param]; elem=elem.offsetParent }; return sum } var getNum=function(str){ return str.match(/(\d+)/)[1]-0 } var main=function(elemPA, elem){ // elemPAはスクロール可能なエレメント。elemはその中の表示したいエレメント。 var elemOT=getSum(elem,'offsetTop'), elemST=getSum(elem,'scrollTop'), FCT=getSum(elemPA.firstChild,'offsetTop'), elemOH=elem.offsetHeight, CH=elemPA.clientHeight if((elemOT-elemST)<FCT){ // 表示領域より↑にいる場合 elemPA.scrollTop = elemOT-FCT }else{ // 表示領域より↓にいる場合(FCT+CH)<(elemOT-elemST+elemOH) もしくは // 上端は表示領域内部だけど、下端がはみ出ている場合(FCT+CH)<(elemOT+elemOH) elemPA.scrollTop = elemOT-FCT-CH+elemOH+getNum(elemPA.style.paddingTop)+getNum(elemPA.style.paddingBottom) } } // エレメント作成直後などの場合、clientHeightなどの正確な値が取得できないので、一旦描画処理を挟むようにsetTimeout経由で起動する。 setScrollTop = function(elemPA, elem){ setTimeout(function(){ main(elemPA, elem) }, 1) } })();

サンプル var FI='firstChild', NE='nextSibling', iH='innerHTML', iT='innerText', CN='childNodes', sI='selectedIndex' ;(function(){ // 指定したエレメントが画面上に表示されるように、scrollTopの値を調整する関数。 var getSum=function(elem, param){ var sum=0; while(elem){ sum+=elem[param]; elem=elem.offsetParent }; return sum } var getNum=function(str){ return str.match(/(\d+)/)[1]-0 } var main=function(elemPA, elem){ // elemPAはスクロール可能なエレメント。elemはその中の表示したいエレメント。 var elemOT=getSum(elem,'offsetTop'), elemST=getSum(elem,'scrollTop'), FCT=getSum(elemPA[FI],'offsetTop'), elemOH=elem.offsetHeight, CH=elemPA.clientHeight if((elemOT-elemST)<FCT){ // 表示領域より↑にいる場合 elemPA.scrollTop = elemOT-FCT }else{ // 表示領域より↓にいる場合(FCT+CH)<(elemOT-elemST+elemOH) もしくは // 上端は表示領域内部だけど、下端がはみ出ている場合(FCT+CH)<(elemOT+elemOH) elemPA.scrollTop = elemOT-FCT-CH+elemOH+getNum(elemPA.style.paddingTop)+getNum(elemPA.style.paddingBottom) } } // エレメント作成直後などの場合、clientHeightなどの正確な値が取得できないので、一旦描画処理を挟むようにsetTimeout経由で起動する。 setScrollTop = function(elemPA, elem){ setTimeout(function(){ main(elemPA, elem) }, 1) } })(); var btn=this, elemN=btn[NE], ce=document.createElement if(elemN || elemN.tagName!='div'){ elemN=ce('div') btn.parentNode.insertBefore(elemN, btn[NE]) } elemN[iH] = '<select></select><div style="height:100px;overflow:auto;border:solid 1px #000;padding:5px;"><div style="border:solid 1px #000;margin:1px;"></div></div>' setTimeout(function(){ var sel=elemN[FI], div=sel[NE], modelD=div[FI].removeNode(true), newD for(var i=0;i<10;i++){ sel.options[i] = new Option(i) div.insertBefore(newD=modelD.cloneNode(true)) newD[iT] = i } sel.onchange=function(){ setScrollTop(div, div[CN][this[sI]]) } },1)