Question

我有两个并排的div，当页面加载时设置为窗口高度。因为右边的div有很多文字，所以我添加了overflow-y: scroll。

我想要实现的是，即使您将鼠标悬停在左侧的div上，右侧的div也会滚动。这有可能与jQuery？

我知道如果我在CSS中做一些聪明的东西，我绝对是正确的div，但是理想情况下我只想用JS来做，我可以在没有jQuery的情况下做到这一点。

我已经设置了一个示例jsFiddle

<section id="scroll-block">
    <div class="row">
        <div class="col-6 left"></div>
        <div class="col-6 right">
            <p>Lots of text will be in here</p>
       </div>
    </div>
</section>

#scroll-block {
  overflow: hidden;
}

#scroll-block .left {
  background-image: url('http://placehold.it/500x600');
  background-size: cover;
  background-repeat: no-repeat;
}

#scroll-block .right {
  padding: 10% 8%;
  overflow-y: scroll;
}

#scroll-block .row {
  overflow: hidden;
}

#scroll-block .left, #scroll-block .right {
  float: left;
  width: 50%;
}

Answer 1

有几件事情，如果你想在保持另一件内容的同时滚动一件内容，你应该安排这些件，以便一个是位置：固定;并置于其他内容之上。以100％高度显示视口的更有效方法是高度：100vh;。如果以这种方式布局页面，您将在页面上的任何位置滚动，并且布局将保持一致。这是一个例子：

<style>
html, body{
   padding: 0;
   margin: 0;
}
div.left {
   background-image: url('http://placehold.it/500x600');
   background-size: cover;
   background-repeat: no-repeat;
   width: 38%;
   position: fixed;
   height: 100vh;
}
div.right {
   float: right;
   width: calc(62% - 20px);
   padding: 10px;
}
</style>

<body>
   <div class="left">&nbsp;</div>
   <div class="right">
      <p>Large amounts of content. Images, text, what have you.</p>
   </div>
</body>

我希望这就是你要找的东西。您可以将class =“right”的高度设置为100vh并设置overflow：auto;如果你想让它以溢出滚动，但你会遇到与现在相同的滚动问题。

当鼠标不在它上面时，jQuery滚动div

1 个答案: