Создайте максимальное и минимальное значение для стиля элемента Div "Top", который делает функцию onclick неактивной

Question

У меня есть плагин для работы с билетами, который предоставляет таблицу событий html. Я хочу, чтобы эта таблица отображалась при прокрутке по событиям, нажимая стрелки вверх и вниз. Поэтому я поместил таблицу за элементом div, в котором скрыто переполнение, и в нем указано только 3 события.

Затем я создал некоторый код, который позволяет верхней или нижней стрелке добавлять или вычитать к «вершине» стиля элемента div для перемещения таблицы вверх и вниз за ограниченным div.

Проблема в том, что пользователь может продолжать нажимать стрелку вверх и вниз за пределами видимости таблицы. Это означает, что если пользователь нажимает верхнюю стрелку слишком много раз, таблица фактически исчезает для пользователя. Я надеюсь получить JavaScript, в котором говорится, что если элемент div достигнет вершины: 0px, то запретить функцию щелчка по верхним стрелкам. Если элемент div достигает вершины: -434px, он запрещает функцию нижней стрелки.

Эти функции затем снова должны стать активными, если они больше не соответствуют указанным c максимальным и минимальным значениям. Я создал примерную демонстрацию кода: https://codepen.io/TheBrandsmen/pen/JjdEQgj

В нем не все CSS и тому подобное, но есть общая идея. Если есть другая лучшая идея о том, как сделать прокручиваемую таблицу html, пожалуйста, не стесняйтесь комментировать это.

body {
  background: gray;
}

.slider-flex-2 tr:nth-child(odd), .slider-flex-2 .pricing-table>li:nth-child(odd), .slider-flex-2 .pricing-extra {
    background: transparent !important;
}

.main_color tr:nth-child(even) {
        background: transparent !important;
}

.slider-flex-2 table {
    background: transparent !important;
}

.slider-flex-2 tr th:first-child, .slider-flex-2 tr td:first-child {
    border: none;
}

.slider-flex-2 td {
    display: flex;
    justify-content: center;
}

td {
    display: flex;
}

.slider-flex-2 .tw-paginate {
    display: none;
}

.slider-flex-2 .tw-plugin-upcoming-event-list a {
    color: #ffffff;
}


span.tw-event-date {
    font-size: 24px;
    font-family: Roboto;
    font-weight: bold;
}

span.tw-event-date:before {
    content: "-";
    padding-right: 10px;
}

.tw-event-name.tw-remove-when-empty {
    max-width: 20vw;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 24px;
    font-family: Roboto;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
}



.move-up {
    margin-top: -47px;
    transition: 1s;
        font-size: 40px;
}

.move-down {
    margin-top: 47px;
    transition: 1s;
        font-size: 40px;
}


.carousel-frame {
    height: 185px;
    overflow: hidden;
}

.tw-plugin-upcoming-event-list {
    position: relative;
    top:0px;
}

.tw-plugin-upcoming-event-list td {
        padding: 16px 12px;
}

.tw-plugin-upcoming-event-list span.tw-event-date {
    white-space: nowrap;
}


.tw-plugin-upcoming-event-list td {
    border-bottom: 1px solid #ffffff !important;
}


#tw-plugin-upcoming-event-list  {
        position: relative;
    top:0px;
}


.up-arrow {
    margin-bottom: 20px;
      max-width: 20vw; 
}

.up-arrow img {
    margin: auto;
    display: block;
}



.down-arrow {
    margin-top: 20px;
    max-width: 20vw; 
}

.down-arrow img {
  margin: auto;
    display: block;
}

$( document ).ready(function() {
    $(".tw-plugin-upcoming-event-list").css("top","0");
});


    $(function(){

    $('.tw-plugin-upcoming-event-list').attr('id',function(i){
          return 'id_'+(i+1);
    });

}); 



  function DownDiv()
            {
                div = document.getElementById("id_1");

                div.style.top = parseInt(div.style.top) - 62 + "px";
            }

            function MoveDiv()
            {
                div = document.getElementById("id_1");

                div.style.top = parseInt(div.style.top) + 62 + "px";
            }

Answer 1

Внес изменения для вас, все, что я сделал, это проверил верхнюю часть div в соответствии с высотой таблицы

$( document ).ready(function() {
    $(".tw-plugin-upcoming-event-list").css("top","0");
});


    $(function(){

    $('.tw-plugin-upcoming-event-list').attr('id',function(i){
          return 'id_'+(i+1);
    });

}); 



  function DownDiv()
            {
                div = document.getElementById("id_1");
              var tableOffset = 150; // teh offest until the end the height is  a bit bigger
              var top =  parseInt(div.style.top)
              var tblStyle =getComputedStyle(div.querySelector('table'))
              var tblHeight = parseInt(tblStyle.height)
              if(top  < ((tblHeight -tableOffset )*-1) ){ // chcek if the top is at the end of the table height
                div.style.top = parseInt(div.style.top)+ "px";
              }else{
                div.style.top = parseInt(div.style.top) - 62 + "px";
              }

            }

            function MoveDiv()
            {
                div = document.getElementById("id_1");
              var top =  parseInt(div.style.top)
                if(top  == 0 ||top > 0){ // check if the the top is 0 or bigger then 0 and make it the same top as before

                                  div.style.top = top + "px";

                }
              else{
                                div.style.top = top + 62 + "px";

              }
            }