jQuery / JavaScript并在滚动div时检查radiobutton

Question

我有一个父div和它的子div。子div没有任何滚动条，但它可以使用标签按钮向左/向右滚动，这些按钮组合为单选按钮。当我检查一个单选按钮时，div会显示和/或不可见，看起来子div可以滚动。

代码工作正常，但我希望能够用两个手指使用我的笔记本电脑的触摸板左右滚动，或者当鼠标指针在div上方时使用平板电脑和手机。我怎么能修改代码？允许使用jQuery和JavaScript。

我对解决方案有几点想法。第一个想法是，当我用两个手指或平板电脑/手机使用触摸板向左/向右滚动时，我可以通过这种方式检查另一个单选按钮。这就是我应该做的全部，但我不能这样做。

 "windows": {
                "MIMode": "gdb",
                "miDebuggerPath": "C:/TDM-GCC-64/gdb64/bin/gdb.exe",
                "setupCommands": [
                    {
                        "description": "Enable pretty-printing for gdb",
                        "text": "-enable-pretty-printing",
                        "ignoreFailures": true
                    }
                ]
            }

这是CSS代码：

<div style="width: 100%; overflow: hidden">

<div id="childdiv">
  <div style="display: inline-block">
    <!-- 102 --><input name="navi" type="radio" id="someID-102" class="divradio" />
    <div class="content" style="float:left;width:350px">&nbsp;
      <div id="navi102">
        <div class="toright"><span><label for="someID-7">&gt;</label></span></div>
      </div>
    </div>
    <!-- 7 --><input name="navi" type="radio" id="someID-7" class="divradio" />
    <div class="content" style="float:left;width:350px">&nbsp;
      <div id="navi7">
        <div class="toleft"><span><label for="someID-102">&lt;</label></span></div>
        <div class="toright"><span><label for="someID-5">&gt;</label></span></div>
      </div>
    </div>
    <!-- 5 --><input name="navi" type="radio" id="someID-5" class="divradio" />
    <div class="content" style="float:left;width:350px">&nbsp;
      <div id="navi5">
        <div class="toleft"><span><label for="someID-7">&lt;</label></span></div>
        <div class="toright"><span><label for="someID-4">&gt;</label></span></div>
      </div>
    </div>
    <!-- 4 --><input name="navi" type="radio" id="someID-4" class="divradio" />
    <div class="content" style="float:left;width:350px">&nbsp;
      <div id="navi4">
        <div class="toleft"><span><label for="someID-5">&lt;</label></span></div>
        <div class="toright"><span><label for="someID-1">&gt;</label></span></div>
      </div>
    </div>
    <!-- default: 1 --><input name="navi" type="radio" id="someID-1" class="divradio" checked="checked" />
    <div class="content" style="float:left;width:0">
      <div id="navi1">
        <div class="toleft"><span><label for="someID-4">&lt;</label></span></div>
        <div class="toright"><span><label for="someID-2">&gt;</label></span></div>
      </div>
    </div>
  </div><!--

  --><div class="round">LQ</div><!--
  --><div class="round">L4</div><!--
  --><div class="round">L3</div><!--
  --><div class="round">L2</div><!--
  --><div class="round">R1</div><!--
  --><div class="round">W2</div><!--
  --><div class="round">WQ</div><!--

  --><div class="backgroundleft"><br /></div>
  <div class="backgroundright"><br /></div>

  <div style="display: inline-block">
    <!-- 101 --><input name="navi" type="radio" id="someID-101" class="divradio" />
    <div class="content" style="float:right;width:350px">&nbsp;
      <div id="navi101">
        <div class="toleft"><span><label for="someID-100">&lt;</label></span></div>
      </div>
    </div>
    <!-- 100 --><input name="navi" type="radio" id="someID-100" class="divradio" />
    <div class="content" style="float:right;width:350px">&nbsp;
      <div id="navi100">
        <div class="toleft"><span><label for="someID-6">&lt;</label></span></div>
        <div class="toright"><span><label for="someID-101">&gt;</label></span></div>
      </div>
    </div>
    <!-- 6 --><input name="navi" type="radio" id="someID-6" class="divradio" />
    <div class="content" style="float:right;width:350px">&nbsp;
      <div id="navi6">
        <div class="toleft"><span><label for="someID-3">&lt;</label></span></div>
        <div class="toright"><span><label for="someID-100">&gt;</label></span></div>
      </div>
    </div>
    <!-- 3 --><input name="navi" type="radio" id="someID-3" class="divradio" />
    <div class="content" style="float:right;width:350px">&nbsp;
      <div id="navi3">
        <div class="toleft"><span><label for="someID-2">&lt;</label></span></div>
        <div class="toright"><span><label for="someID-6">&gt;</label></span></div>
      </div>
    </div>
    <!-- 2 --><input name="navi" type="radio" id="someID-2" class="divradio" />
    <div class="content" style="float:right;width:350px">
      <div id="navi2">
        <div class="toleft"><span><label for="someID-1">&lt;</label></span></div>
        <div class="toright"><span><label for="someID-3">&gt;</label></span></div>
      </div>
    </div>
  </div>
</div>

</div>

样本

＆＃13;

＆＃13;

#childdiv { overflow: hidden; width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center; }

.round { display: inline-block; vertical-align: top; width: 350px; }
.backgroundleft { z-index: 99; width: 70px; position: fixed; left: 0; top: 100px; margin: auto; background-color: red; }
.backgroundright { z-index: 99; width: 70px; position: fixed; right: 0; top: 100px; margin: auto; background-color: red; }
.toleft { z-index: 100; position: fixed; left: 0; top: 100px; }
.toright { z-index: 100; position: fixed; right: 0; top: 100px; }

.divradio { display: none; }
.content { }
.divradio ~ .content { display: none; }
.divradio:checked ~ .content { display: block; }

input[type="radio"]#someID-1:checked + div #navi1 { display: block; }
input[type="radio"]#someID-2:checked + div #navi2 { display: block; }
input[type="radio"]#someID-3:checked + div #navi3 { display: block; }
input[type="radio"]#someID-4:checked + div #navi4 { display: block; }
input[type="radio"]#someID-5:checked + div #navi5 { display: block; }
input[type="radio"]#someID-6:checked + div #navi6 { display: block; }
input[type="radio"]#someID-7:checked + div #navi7 { display: block; }
input[type="radio"]#someID-99:checked + div #navi99 { display: block; }
input[type="radio"]#someID-100:checked + div #navi100 { display: block; }
input[type="radio"]#someID-101:checked + div #navi101 { display: block; }
input[type="radio"]#someID-102:checked + div #navi102 { display: block; }

＆＃13;

#childdiv { overflow: hidden; width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center; }

.round { display: inline-block; vertical-align: top; width: 350px; }
.backgroundleft { z-index: 99; width: 70px; position: fixed; left: 0; top: 100px; margin: auto; background-color: red; }
.backgroundright { z-index: 99; width: 70px; position: fixed; right: 0; top: 100px; margin: auto; background-color: red; }
.toleft { z-index: 100; position: fixed; left: 0; top: 100px; }
.toright { z-index: 100; position: fixed; right: 0; top: 100px; }

.divradio { display: none; }
.content { }
.divradio ~ .content { display: none; }
.divradio:checked ~ .content { display: block; }

input[type="radio"]#someID-1:checked + div #navi1 { display: block; }
input[type="radio"]#someID-2:checked + div #navi2 { display: block; }
input[type="radio"]#someID-3:checked + div #navi3 { display: block; }
input[type="radio"]#someID-4:checked + div #navi4 { display: block; }
input[type="radio"]#someID-5:checked + div #navi5 { display: block; }
input[type="radio"]#someID-6:checked + div #navi6 { display: block; }
input[type="radio"]#someID-7:checked + div #navi7 { display: block; }
input[type="radio"]#someID-99:checked + div #navi99 { display: block; }
input[type="radio"]#someID-100:checked + div #navi100 { display: block; }
input[type="radio"]#someID-101:checked + div #navi101 { display: block; }
input[type="radio"]#someID-102:checked + div #navi102 { display: block; }

＆＃13;

＆＃13;

＆＃13;