Question

我想阻止滚动其他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必须在没有正文滚动的情况下滚动。（当左侧滚动条触摸结束时，身体开始滚动，我想解决这个问题）
当我在右侧DIV滚动滚动时，身体不会滚动

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

Answer 1

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

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

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

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

如何只在鼠标位置div上滚动？

1 个答案: