<input type = 'textarea'onmousemove = 'toscheck()'/>가 Firefox에서만 작동하지 않습니다.

Question

어떤 이유로이 코드는 모든 크롬, 사파리 및 ei에서 작동하지만 파이어 폭스에서는 작동하지 않습니다.

 <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>은 정상적으로 작동합니다.

저는 자바 스크립트에 익숙하지 않으므로 도움을 주시면 대단히 감사하겠습니다.

Answer 1

Live example

기타 : 당신의 자바 스크립트 코드에서 누락 닫는 대괄호가있다.

---

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

또한, 함수에 직접 tos.property로 이동합니다.

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

을 또는이 같은 함수 내에서 텍스트 영역을 얻을 :

이처럼 기능 설정을 mousemove="toscheck(this)"에 this을 전달하고 있어야합니다 중 하나

<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

실제 텍스트 상자가 얼마나 큰? 어쩌면 그것은 당신이 예상하는 것보다 다른 크기로 렌더링되었을 수도 있고/또는 scrollheight가 약간 다를 수도 있습니다. 글꼴 크기/해상도/DPI 설정 문제 일 수 있습니다. 이를 해결하기 위해 작은 겹침 양을 추가하여 절대 하단으로 스크롤하지 않아도됩니다 (예 : 키보드 탐색 및 Ctrl + End를 사용할 때 Internet Explorer에서는 작동하지 않음). 사람들은뿐만 아니라 탐색하는 키보드 키를 사용할 수 있습니다로 보조 노트에

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

, 나는 onmousemove에서이를 확인하지 않을 것입니다. onblur과 onmouseup 및/또는 onkeyup을 사용하는 것이 좋습니다. 그러나 스크롤 막대에 마우스 버튼을 놓을 때 onmouseup이 실행되지 않을 수 있습니다.