как определить, находится ли определенный div в представлении родительского элемента div с возможностью прокрутки

Question

Проще говоря: у меня есть div с возможностью прокрутки, внутри у меня, скажем, 10 div одинаковой высоты и ширины, div1, div2, div3 ..... и т. Д. Div10.

Если возможность прокруткиКонтейнер прокручивается и останавливается в какой-то момент, какой самый быстрый способ определить, является ли div 2 (.windiv) видимым или нет?

это в основном часть эффекта игрового автомата, я пытаюсь определитьесли человек ударил победителя или нет.В этом примере div2 - это элемент победителя.

У меня есть несколько способов добиться этого, но я ищу исправление с одним типом линии.что-то короткое и быстрое.будет работать либо JavaScript, либо jQuery.

Заранее спасибо.

<div style="height:70px;width:60px" class="scrollable">
<div style="height:auto;width:100%;" class="innerContainer">
<div style="height:70px;width:60px" class="slot">div 1</div>
<div style="height:70px;width:60px" class="slot windiv">div 2</div>
<div style="height:70px;width:60px" class="slot">div 3</div>
<div style="height:70px;width:60px" class="slot">div 4</div>
<div style="height:70px;width:60px" class="slot">div 5</div>
<div style="height:70px;width:60px" class="slot">div 6</div>
<div style="height:70px;width:60px" class="slot">div 7</div>
<div style="height:70px;width:60px" class="slot">div 8</div>
<div style="height:70px;width:60px" class="slot">div 9</div>
<div style="height:70px;width:60px" class="slot">div 10</div>
</div>
</div>


/*maybe something like */
<script>
if(div.windiv.position().top == div.scrollable.position().top){
alert('its a winner');   
}
</script>
/*how would i work this out? with positions() or offsets() i've hit a 
blank */

Answer 1

Почему бы не сделать его опцией выбора с функцией "onchange ()"?Пользователь может выбрать один вариант из десяти.Опция победы может быть установлена ​​на функцию, которая затем открывает всплывающее окно «ПОБЕДИТЕЛЬ !!».Остальные параметры можно настроить, чтобы скрыть поле выбора, чтобы игрок получил только один выстрел в него.

    <select onchange="winningChoicesFunction()" id="winningChoicesSelect">
    <option disabled selected>Try your luck!</option>
    <option class="noWinner">choice 1</option>
    <option class="slot windiv">choice 2</option>
    <option class="noWinner">choice 3</option>
    <option class="noWinner">choice 4</option>
    <option class="noWinner">choice 5</option>
    <option class="noWinner">choice 6</option>
    <option class="noWinner">choice 7</option>
    <option class="noWinner">choice 8</option>
    <option class="noWinner">choice 9</option>
    <option class="noWinner">choice 10</option>
    </select>`

    <script>
    function winningChoicesFunction() {
    var winningChoicesSelect=document.getElementById("winningChoicesSelect");
         if(winningChoicesSelect.value!="choice 2"){ //if winner choice not chose
         alert("Sorry, not today buster!");          //alert not a winner
         winningChoicesSelect.style.display="none";  //Hide the slot
         document.write("Try again another day!");   //message in place of slot
         }else{                                      //if winning slot is chose
         alert("CONGRATULATIONS! YOU WIN!");         //alert the winner
         winningChoicesSelect.style.display="none";  //hide slot 
         document.write("Winner winner chicken dinner!");  //show prize
         }
    }

Попробуйте в действии здесь: https://slotsexample.netlify.com