JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position:relative; float:left; border-style:dotted;border-width:1px;">
    <div class="board-nav" id="0">Info</div>
    <div class="board-nav" id="1">Board1</div>
    <div class="board-nav" id="2">Board2</div>
    <div class="board-nav" id="3">Board3</div>
    <div class="board-nav" id="4">Board4</div>
</div>
<div style="padding:10px; margin-left: 60px">
    Clicking on the "Menu" on the right hand side, moves the boards into view as appropriate.  Using WebDriver, we can see the elements of Info, Board1 and Board2, but as soon as Board3/Board4 are scrolled into view, everything becomes disabled
</div>
<div id="content" style="width:1612px; height:864px; position:absolute; left:58px; overflow:hidden">
    <div class="scroller">
        <ul class="vertical">
            <li class="v" id="li0">
                <div class="target"><span>Info</span>

                </div>
            </li>
            <li class="v" id="li1">
                <div class="target"><span>Board1</span>

                </div>
            </li>
            <li class="v" id="li2">
                <div class="target"><span>Board2</span>

                </div>
            </li>
            <li class="v" id="li3">
                <div class="target"><span>Board3</span>

                </div>
            </li>
            <li class="v" id="li4">
                <div class="target"><span>Board4</span>

                </div>
            </li>
        </ul>
    </div>
</div>

CSS

.board-nav {
    font-size: 12px;
    color: #1b1a1a;
    margin-left: 10px;
    margin-right: 10px;
    vertical-align: middle;
}

.v{
    width:400px; 
    height:864px;
    border-style: dotted;
    border-width:1px;
}

.scroller{
	-webkit-transition: -webkit-transform 0ms; transition: -webkit-transform 0ms; 
	-webkit-transform-origin: 0px 0px; 
	-webkit-transform: translate(0px, 0px) scale(1) translateZ(0px);
	transition-property: transform; 
	transform-origin: 0px 0px 0px; 
	transform: translate(0px, 0px) scale(1) translateZ(0px);
    height:4000px;
}

JavaScript

var boardPositions = [0, -882, -1748, -2614, -3480];
 var $scroller = null;

 function changeBoard(event) {
     var newValue = 'translate(0px, ' + boardPositions[event.target.id] + 'px) scale(1) translateZ(0px)';

     $('.scroller').css('-webkit-transform', newValue);
     $('.scroller').css('transform', newValue);
 }

 $(document).ready(function () {
     var $boards = $('.board-nav');
     $boards.on('click', changeBoard);
 });