Warum In-Viewport JavaScript funktioniert nicht in meinem Code?

Question

Warum in-viewport Javascript funktioniert nicht in meinem Code?

https://jsfiddle.net/vncxfx0s/30/

Wenn Klick auf Click to move Katze Bild gleitet es in Ordnung ist. Aber

, wenn ich Code füllen

if($("#testtest").is(":in-viewport")) 
    { 
     alert("hhh"); 
    } 

zu erkennen, wenn id="testtest" Show in Ansichtsfenster wird es sollte wachsam sein.

Aber es funktioniert nichts, wie kann ich tun?

<div style="cursor: pointer;" id="move-left" onclick="left_fn(-422)"> 
     Click to move 
    </div> 


    <div style=" width: 500px; overflow: hidden; "> 
     <ul style=" width: 2000em; transition: transform 200ms ease-in-out; transform: translate3d(0px, 0px, 0px); margin-left: -10px; padding: 0;" id="cat-ul"> 
      <li style=" display: inline-table; "> 
       <img src="http://i.imgur.com/w3abdeV.jpg"> 
      </li> 
      <li style=" display: inline-table; "> 
       <img src="http://i.imgur.com/w3abdeV.jpg"> 
      </li> 
      <li style=" display: inline-table; "> 
       <img src="http://i.imgur.com/w3abdeV.jpg"> 
      </li> 
      <li style=" display: inline-table; "> 
       <img src="http://i.imgur.com/w3abdeV.jpg"> 
      </li> 
      <li style=" display: inline-table; "> 
       <img src="http://i.imgur.com/w3abdeV.jpg"> 
      </li> 
      <li style=" display: inline-table; "> 
       <img src="http://i.imgur.com/w3abdeV.jpg"> 
      </li> 
      <li style=" display: inline-table; "> 
       <img src="http://i.imgur.com/w3abdeV.jpg"> 
      </li> 
      <li style=" display: inline-table; "> 
       <img src="http://i.imgur.com/w3abdeV.jpg"> 
      </li> 
      <li style=" display: inline-table; "> 
       <img src="http://i.imgur.com/w3abdeV.jpg"> 
      </li> 
      <li style=" display: inline-table; "> 
       <img src="http://i.imgur.com/w3abdeV.jpg"> 
      </li> 
      <li id="testtest" style="width: 1px; display: inline-table;"> 
      </li>    
     </ul> 
    </div> 

<script> 
function left_fn(value) { 
    if($("#testtest").is(":in-viewport")) 
    { 
     alert("hhh"); 
    } 
    document.getElementById("cat-ul").style.transform = "translate3d("+value+"px, 0px, 0px)"; 
    var x = (value + 422); 
    var y = (value - 422); 
    document.getElementById('move-left').setAttribute('onclick','left_fn('+y+')') 
} 
</script> 

Answer 1

Weil Sie benötigen jquery für die iti s arbeiten https://jsfiddle.net/vncxfx0s/31/

<script> 
function left_fn(value) { 
    if($("#testtest").is(":in-viewport")) 
    { 
     alert("hhh"); 
    } 
    document.getElementById("cat-ul").style.transform = "translate3d("+value+"px, 0px, 0px)"; 
    var x = (value + 422); 
    var y = (value - 422); 
    document.getElementById('move-left').setAttribute('onclick','left_fn('+y+')') 
} 
</script>