scrollTop裏面的位置固定

我面臨一個問題，我需要使用scrollTop裏面的div位置固定和溢出y。我沒有看到一個帖子 Using scrollTop inside of a fixed element with overflow-y:scroll scrollTop裏面的位置固定

我的問題是，錯誤元素我有一個滾動定位內容是相對位於內側。所以這個代碼不起作用

我的小提琴 http://jsfiddle.net/5446a6ds/2/

如果我刪除與相對定位父，它的工作原理，但我不能這樣做。此外，錯誤可能位於相對定位內容的任何位置，因此滾動到內容也不是一種選擇。

HTML

<div id="relativeDad"> 
    <div id="containerParent"> 
    <div id="containerChild"> 
     <section id="content"> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
      this is a form<br> 
       this is a form<br> 
      <p class="form-error-msg"> 
Please provide missing information in the fields highlighted below.</p> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
      this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
      this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       this is a form<br> 
       <fieldset> 
        <input type="date" id="dateOfBirth" required=""> 
        <input type="password"> 
       </fieldset> 
       <button id="button1">button</button> 


     </section> 
     </div> 
    </div> 
    </div> 

Javascript 
$("#button1").on("click", function(){ 

    var position = $(".form-error-msg").position().top +    $("#containerChild").scrollTop(); 
$("#containerChild").animate({scrollTop: position}); 
}); 

CSS 
#relativeDad { 
    position: relative; 
     overflow: hidden; 
} 
#containerParent { 
    position: fixed; 
    background-color:blue; 
    height: 100%; 
    border:1px solid red; 
    width: 100%; 
} 
#containerChild { 
    position: fixed; 
    overflow-y: scroll; 
height: 100%; 

} 

#content { 
    position:relative; 
}

來源

2015-04-22 keerti

你添加太多的位置。有

var position = $(".form-error-msg").position().top;

是足夠的，因爲.POSITION是相對於已經偏移父所以你只能在#containerChild

滾動這裏是一個更新的小提琴。我之前添加了一段，並將高度更改爲80％以演示相對計算。

http://jsfiddle.net/5446a6ds/3/

來源

2015-04-22 17:46:56 jerrylow

非常感謝。這是行得通的，但是當我在兩者之間添加內容時，http://jsfiddle.net/5446a6ds/4/它在錯誤消息 – keerti

@keerti之上的某處滾動有兩個問題。首先，.position通過位置檢測元素相對於其最接近的父元素的位置：relative set：必須從#content中移除position：relative。所以現在它會計算.form-error-msg相對於#relativeParent的位置。但是因爲你有一個在#relativeParent之外的段落，它不會被考慮在內。一切都應該坐在最直接的容器內。例如：http://jsfiddle.net/5446a6ds/5/ – jerrylow

謝謝這確實有幫助。謝謝 – keerti

scrollTop裏面的位置固定

回答

相關問題