總是顯示子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(); 
});

網絡ddle：http://jsfiddle.net/PSSdC/

當用戶滾動到底部時，他關閉彈出窗口並再次打開。我想要的是在彈出窗口始終打開時始終顯示紅色（#three）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」？你只需要通過$（「mainDiv」）。html（「fromajax」）來更改他的html內容？ – Dvir

我正在使用jstree api。 '.mainDiv'中有一棵樹。我不能像正常的阿賈克斯一樣使用成功。雖然該api提供loaded.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打開

回答

相關問題