確定元素是高於還是低於摺疊頁數

我有一些頁面有多個用戶可以輸入文本的輸入框。其中一些必須在點擊「下一步」按鈕之前填寫。我有驗證錯誤彈出爲用戶看到，但如果問題，如果關閉頁面，我希望頁面滾動到它，而不是他們必須搜索丟失/錯誤的領域。確定元素是高於還是低於摺疊頁數

我有一個滾動到位，但我很難確定什麼元素滾動到什麼元素。例如，如果輸入在頁面的上方，我想滾動到標籤，以便他們可以看到錯誤和輸入。但是，如果它低於摺疊，那麼我會選擇輸入，以便在摺疊之上顯示。這有任何意義嗎？

我想我真正要問的是，有沒有一種方法可以確定元素在頁面上的位置。如果它在摺疊上方滾動到標籤，但是如果它低於摺疊，則滾動到輸入？

現在我只是滾動到錯誤的輸入字段。

$(".container-content").mCustomScrollbar("scrollTo",$('.container-content').find('input.error:first')); //Yes I am using a plugin for the scroll

如果我只是滾動到標籤，那麼它看起來像這樣。 enter image description here

2015-07-02 zazvorniki

何w大是你的標籤，所以只需滾動到標籤上仍然不會使輸入字段變得可見。 – CBroe

_「有沒有一種方法可以確定元素在頁面上的位置」_ - 所有需要的是確定窗口高度，滾動位置以及元素在頁面上的位置......然後進行一些簡單的數學運算。 – CBroe

@CBroe他們是正常大小1em。 :)但是，如果輸入低於頁面的摺疊，那麼它會滾動到標籤並且不顯示輸入。 – zazvorniki

您可以使用此功能：Jsfiddle

function isElementInViewport (el) { 
    var rect = el[0].getBoundingClientRect(); 
    return (rect.top>-1 && rect.bottom <= $(window).height()); 
}

最初發布Here

2015-07-02 18:09:29

我會如何使用它？每次我嘗試調用這個函數時，都會給我一個錯誤，告訴我這不是一個函數。 – zazvorniki

我身邊沒有錯誤 –

你使用什麼插件 –

回答