<input type = 'textarea' onmousemove = 'toscheck（）' />はFirefoxでのみ動作しません

Question

何らかの理由で、このコードはすべてのchrome、safari、およびeiで動作しますが、firefoxでは動作しません。

 <script type="text/javascript"> 
     function toscheck(){ 
     if(tos.scrollTop+540 > tos.scrollHeight){ 
      alert(tos.scrollTop + " " + tos.scrollHeight); 
     } 
    } 
     </script> 

---------- 

    <textarea name="tos" id="tos" readonly="readonly" onmousemove="toscheck()">text</textarea> 

他のすべてのブラウザでは、FFでトリガされても問題ありません。

ただし、<textarea.. onmousemove=alert('test')>text</textarea>は問題ありません。

私はjavascriptを初めて使うので、どんな助けでも大歓迎です。

Answer 1

Live example

その他：JavaScriptコードで行方不明閉じ括弧があります。

<script type="text/javascript"> 
    function toscheck(){ 
     if(tos.scrollTop+540 > tos.scrollHeight){ 
      alert(tos.scrollTop + " " + tos.scrollHeight); 
     } 
    } // <----- was missing 
</script> 

---

また、あなたの関数では、あなたは直接tos.propertyに行きます。

あなたはmousemove="toscheck(this)"にthisに合格する必要があり、このようなあなたの機能設定があります、次のいずれか

<script type="text/javascript"> 
    function toscheck(elem){ 
     if(elem.scrollTop+540 > elem.scrollHeight){ 
      alert(elem.scrollTop + " " + elem.scrollHeight); 
     } 
    } 
</script> 

またはこのような機能の中から、あなたのテキストエリアを取得：

<script type="text/javascript"> 
    function toscheck(){ 
     var tos = document.getElementById('tos'); 
     if(tos.scrollTop+540 > tos.scrollHeight){ 
      alert(tos.scrollTop + " " + tos.scrollHeight); 
     } 
    } 
</script> 

Answer 2

これは実際にはどのブラウザでも機能しません。あなたは私のためにFFで動作しているようですあなたの関数を閉じるために}を逃すより

<script type="text/javascript"> 
function toscheck() { 
    if (tos.scrollTop + 540 > tos.scrollHeight) { 
    alert(tos.scrollTop + " " + tos.scrollHeight); 
    } 
} 
</script> 

Answer 3

ベストソリューションをjQueryを使用するとブラウザ間で自動的にクロスメソッドが使用されるか、this pageを参照してください。クロスブラウザでのコードの互換性の違いについては、

Scrolling offset - how much the page has scrolled. 

var x,y; 
if (self.pageYOffset) // all except Explorer 
{ 
    x = self.pageXOffset; 
    y = self.pageYOffset; 
} 
else if (document.documentElement && document.documentElement.scrollTop) 
    // Explorer 6 Strict 
{ 
    x = document.documentElement.scrollLeft; 
    y = document.documentElement.scrollTop; 
} 
else if (document.body) // all other Explorers 
    { 
     x = document.body.scrollLeft; 
     y = document.body.scrollTop; 
    } 

と

var x,y; 
    var test1 = document.body.scrollHeight; 
    var test2 = document.body.offsetHeight 
    if (test1 > test2) // all but Explorer Mac 
    { 
     x = document.body.scrollWidth; 
     y = document.body.scrollHeight; 
    } 
    else // Explorer Mac; 
     //would also work in Explorer 6 Strict, Mozilla and Safari 
    { 
     x = document.body.offsetWidth; 
     y = document.body.offsetHeight; 
    } 

Answer 4

あなたの実際のテキストボックスには、どのくらいでしょうか？たぶんそれはあなたが予想していたものとは異なるサイズでレンダリングされているかもしれません。そして/またはスクロール高さは少し異なりますか？たぶんそれはフォントサイズ/解像度/ DPI設定の問題です。それを解決しようとするには、小さなオーバーラップ量を追加して、絶対的な下までスクロールする必要はありません（たとえば、キーボードナビゲーションとCtrl + Endを使用する場合IEでは機能しません）。サイドノートでは

if(tos.scrollTop + 565 > tos.scrollHeight){ 

人が同様に移動するには、キーボードのキーを使用する可能性があるとして、私はonmousemoveでこれをチェックしません。 onblur、おそらくonmouseup、onkeyupのいずれかを使用することをおすすめします。スクロールバー上にマウスボタンが放されている場合は、onmouseupが起動しないことがあります。