Всегда показывать дочерний div при открытии прокручиваемого родительского div

У меня есть div с несколькими div внутри него, чтобы пользователь мог прокручивать его. Он переключается - показывается/скрывается при нажатии кнопки.Всегда показывать дочерний div при открытии прокручиваемого родительского div

HTML:

<div id="mainDiv"> 
    <div class="innerDiv" id="one"></div> 
    <div class="innerDiv" id="two"></div> 
    <div class="innerDiv" id="three"></div> 
    <div class="innerDiv" id="four"></div> 
    <div class="innerDiv" id="five"></div> 
    <div class="innerDiv" id="six"></div> 
    <div class="innerDiv" id="seven"></div> 
    <div class="innerDiv" id="eight"></div> 
    <div class="innerDiv" id="nine"></div> 
    <div class="innerDiv" id="ten"></div> 
</div> 

<a href="javascript:void(0)" id="opnLnk">Open Popup</a> 
<a href="javascript:void(0)" id="clsLnk">Close Popup</a>

CSS:

#mainDiv {width:300px; height:350px; border:1px solid #000; background-color:palegreen; overflow-x:hidden; overflow-y:auto} 
.innerDiv {width:298px; border:1px solid green; height:50px} 
#three {background-color:red} 
.innerDiv:nth-child(odd) {background-color:green} 
.innerDiv:nth-child(even) {background-color:blue} 
#opnLnk, #clsLnk {right:30px; right:30px; position:absolute} 
#opnLnk {top:30px} 
#clsLnk {top:70px}

JS:

$("#opnLnk").click(function(){ 
    // need a script to always show red div 
    $("#mainDiv").show(); 
}); 

$("#clsLnk").click(function(){ 
    $("#mainDiv").hide(); 
});

Fi ddle:http://jsfiddle.net/PSSdC/

Когда пользователь прокручивал нижнюю часть, он закрывает всплывающее окно и снова открывается. я хочу показать красный (# три) div всегда в верхней строке, когда всплывающее окно всегда открыто

Я уже пробовал метод jquery scrollTop, но поскольку у меня есть загруженный в него контент ajax, мне нужно некоторое обходное решение.

источник

2013-09-16 Ashwin

Вы должны прокрутить div до вершины после любого события переключения.

$("#clkLnk").click(function(){ 
    // need a script to always show red div 
    $("#mainDiv").toggle("slow",function(){ 
     $("#mainDiv").scrollTop(0); 
    }); 
});

работает Пример:
jsFiddle

источник

2013-09-16 12:15:19 Dvir

Вашего решение работает отлично подходит для моей скрипки. Я уже пробовал scrollTop (0). Но поскольку я динамически загружаю контент, это не полезно в моем сценарии. – Ashwin

Как вы динамически загружаете контент? можете ли вы показать свой код? вы делаете это с ajax? вы переопределяете «mainDiv»? вы просто меняете свой html-контент на $ («mainDiv»). html («fromajax»)? – Dvir

Я использую jstree api. У меня есть дерево внутри '.mainDiv'. Я не могу использовать успех, как в обычном ajax. Хотя api предоставляет load.jstree .... но он вызывается, когда ответ получен от сервера, а не когда создается html дерева. – Ashwin

Добавить функцию scrollToElement вашим JS.

 function scrollToElement(ele) { 
$("#mainDiv").scrollTop(ele.offset().top).scrollLeft(ele.offset().left); 
}

Работа скрипка: http://jsfiddle.net/PSSdC/4/

источник

2013-09-16 12:21:52 RiderHood

Ваше решение должно работать, но не уверен, что я столкнулся с какой-то проблемой. Я использовал scrollTop (0) на закрытии, а не на открытом, и он легко решил мою проблему. – Ashwin

Всегда показывать дочерний div при открытии прокручиваемого родительского div

ответ

Смежные вопросы