如何仅在鼠标位置 div 上滚动？答案

【问题标题】：How to make to scroll on mouse position div only?如何仅在鼠标位置 div 上滚动？
【发布时间】：2016-11-09 09:03:16
【问题描述】：

我想阻止滚动DIV的其他DIV。

HTML：

<div id="body">
  <div class="long">
    <div class="half-height" style="background-color:blue"></div>
    <div class="half-height" style="background-color:yellow"></div>
  </div>

  <div id="left-side" class="side">
    <div class="long">    
        <div class="half-height" style="background-color:red"></div>
        <div class="half-height" style="background-color:green"></div>
    </div>
  </div>
<div>

  <div id="right-side" class="side">
    <div class="half-height" style="background-color:black"></div>
    <div class="half-height" style="background-color:white"></div>
  </div>
</div>

CSS：

#body {
  height:300px;
  width:300px;
  background-color:white;
  overflow:auto;
  position:relative;
}

.long {
  height:500px;
}

.half-height {
  height:50%;
}

.side {
  height:100%;
  position:absolute;
  width:30%;
  background-color:white;
  top:0;
  overflow:auto;
}

#left-side {
  left:0;
}

#right-side {
  right:0;
}

左侧 DIV 必须可滚动而无需正文滚动。（当左侧的滚动条触摸到结束，body开始滚动，我想解决这个问题）
当我在右侧 DIV 中滚动时，正文不会滚动

这是我的小提琴https://jsfiddle.net/vuju6pgb/

【问题讨论】：

为什么不只是overflow:hidden; body 那么呢？根据您的描述，这就是您所需要的

标签： javascript jquery html css

【解决方案1】：

您可以在 mouseenter 事件上添加一个 css 以将溢出设置为隐藏，并在 mouseleave 事件上将其切换回自动。

$("#left-side").mouseenter(function(){
    $("#body").css("overflow", "hidden");
}).mouseleave(function(){
    $("#body").css("overflow", "auto");
});

您也可以对 #body 和 body 执行相同的操作。

这是更新的小提琴https://jsfiddle.net/vuju6pgb/4/

【讨论】：