滚动在子div（固定）应滚动父div

本文介绍了滚动在子div（固定）应滚动父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