Question

我想在某些时候滚动div绿色滚动红色div 可能是通过jQuery或纯javascript ????

<div class="parentDiv">
    <p>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>
    <br>nothing to see here <br>
    <br>nothing to see here <br>
    <br>nothing to see here <br>
        <p>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>
    <br>nothing to see here <br>
    <br>nothing to see here <br>
    <br>nothing to see here <br>


    </p>
          <div class="childDiv">
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        v
        this should scroll only form outside and inside<br>
    </div>
</div>

http://jsfiddle.net/y1byh25d/6/

Answer 1

您希望监控正在滚动的元素的scroll事件，然后您可以获取scrollTop值并将其应用于要与其一起滚动的div。

以下是如何在jquery中执行此操作。

$('.childDiv').on('scroll',function() {
	$('.parentDiv').scrollTop($(this).scrollTop());
})

.parentDiv
{
  background-color: red;
  height: 400px;
  overflow: auto;
  position: relative;
}
.parentDiv::-webkit-scrollbar{
    display: none;
}

.childDiv
{
  background-color: green;
    height: 100px;
    width: 300px;
    overflow: scroll;
    position: fixed;
    bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentDiv">
    <p>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>
    <br>nothing to see here <br>
    <br>nothing to see here <br>
    <br>nothing to see here <br>
        <p>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>nothing to see here <br>
    <br>nothing to see here <br>
    <br>nothing to see here <br>
    <br>nothing to see here <br>
    
    
    </p>
          <div class="childDiv">
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        this should scroll only form outside and inside<br>
        v
        this should scroll only form outside and inside<br>
    </div>
</div>

如何在某个时间滚动两个div

1 个答案: