滚动在子div（固定）应滚动父div [英] Scrolling in child div ( fixed ) should scroll parent div

问题描述

我有一个父母和子女div。 Child div绝对位于顶部并可滚动。我的要求是滚动父div，当我滚动里面的子div和滚动应该是相同的，即如果我在子div滚动100px然后外部div也应滚动100px。

Jsfiddle

HTML

 < div class =outer> 
< div class =inner> 
< p> 
 Lorem ipsum dolor sit amet，consectetur adipiscing elit。 
 Curabitur mollis gravida metus，ac lacinia quam lobortis vel。 Cras interdum purus 
 aliquam，porttitor metus nec，ornare quam。 Morbi eget lobortis elit 
 ... 
 ... 
< / p> 
< / div> 
< / div> 
  

CSS

  .outer {
 height：1600px; 
宽度：100％; 
背景：#ddd; 
} 
 
 .inner {
 position：absolute; 
 height：200px; 
 width：400px; 
背景：红色; 
 margin：auto; 
 top：40px; 
 right：0px; 
 left：0px; 
 overflow：scroll; 
 
  

解决方案

$ c>滚动事件。在事件处理函数中，设置父级的滚动顶端等于孩子的位置。

类似如下：

<$ （'scroll'，function（）{
var sTop = $（this）.scrollTop（）;
$（$'$'$'$' '#parent'）。scrollTop（sTop）;
}）;

JSFiddle

I have one parent and child div. Child div is absolutely positioned to the top and is scrollable. My requirement is to scroll the parent div when i scroll inside the child div and scrolling should be same i.e if i scroll 100px in child div then outer div should also scroll by 100px.

Jsfiddle

HTML

<div class="outer">
    <div class="inner">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Curabitur mollis gravida metus, ac lacinia quam lobortis vel. Cras interdum purus
            aliquam, porttitor metus nec, ornare quam. Morbi eget lobortis elit
            ...
            ...
        </p>
    </div>
</div>

CSS

.outer{
    height:1600px;
    width:100%;
    background:#ddd;
}

.inner{
    position:absolute;
    height:200px;
    width:400px;
    background:red;
    margin:auto;
    top:40px;
    right:0px;
    left:0px;
    overflow:scroll;
}

解决方案

Listen for the scroll event on the child. In the event handler function, set the parent's scroll top equal to the child's.

Something like the following:

$('#child').on('scroll', function(){
    var sTop = $(this).scrollTop();
    $('#parent').scrollTop(sTop);
});

JSFiddle

这篇关于滚动在子div（固定）应滚动父div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！