如果触控板不可用，请添加滚动条

Question

使用javascript，我附加了一个事件，当用户在mouseover上方悬停"col-1 blue"时，会触发一个事件，该事件位于两个div的中间并垂直向下运行（您可以看到它在https://jsfiddle.net/mjmitche/0r69mjh7/16/的样子，但在我的实际应用中，垂直高度是动态的，总是更长/更高。

在Mac上，使用触控板，我可以在此蓝色条上向下滚动页面中心并保持激活悬停属性，这对于此特定应用程序非常重要。据我所知，这种类型的功能在大多数其他计算机上都不可用。问题：如果（并且仅当）此触控板类型滚动不可用，是否有办法放置滚动条。

＆＃13;

＆＃13;

var x = document.getElementsByClassName("col-1 blue");
x.addEventListener("mouseover", function() {
  console.log("do something while hovering over blue...");
});

＆＃13;

.grid-container {
  width: 100%;
  max-width: 1200px;
}
/*-- our cleafix hack -- */

.row:before,
.row:after {
  content: "";
  display: table;
  clear: both;
}

[class*='col-'] {
  float: left;
  min-height: 1px;
  width: 16.66%;
  /*-- our gutter -- */
  padding: 12px;
  background-color: #FFDCDC;
}

.col-1 {
  width: 16.66%;
}

.col-2 {
  width: 33.33%;
  height: 260px;
}

.col-3 {
  width: 50%;
}

.col-4 {
  width: 66.66%;
}

.col-5 {
  width: 83.33%;
}

.col-6 {
  width: 100%;
}

.outline,
.outline * {
  outline: 1px solid #F6A1A1;
}
/*-- some extra column content styling --*/

[class*='col-'] > p {
  background-color: #FFC2C2;
  padding: 0;
  margin: 0;
  text-align: center;
  color: white;
}

.col-1.blue {
  background-color: blue;
  height: 260px;
}

＆＃13;

<div class="grid-container">
  <div class="row">
    <div id="red" class="col-2">
      hi
      <br/> hi
      <br/> hi
      <br/>

    </div>
    <div class="col-1 blue">
      d
    </div>
    <div class="col-2">
      hi
      <br/> hi
      <br/> hi
      <br/>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;