如何在關注輸入框的情況下向下滾動頁面？

我有一個較低的'浮動'固定位置div，覆蓋屏幕底部的一部分，具有高Z指數和一堆輸入框。

問題是，當其中一個較低的輸入框被聚焦時，通過按Tab鍵，其內容部分被div隱藏。我希望檢測下方輸入框的聚焦情況，並將頁面向下滾動「恰到好處」以將它們帶到可見光點。

有沒有一個乾淨的方法來做到這一點？

編輯：my solution似乎工作，除了瀏覽器縮放。例如，嘗試縮放144％。任何想法如何解決？

2011-10-04 ripper234

請注意，您不希望它只在該輸入標記後滾動。如果任何輸入標籤被浮動div覆蓋，您希望它滾動。如果你放大或縮小，這可能會改變。 –

@Amaan - 不確定這是否正確。只有關注的輸入標籤很重要。縮放是一個有趣的問題，但作爲第一個近似我會接受一個很好的答案，即使它不處理變化的縮放。請注意，如果用戶使用Shift-Tabs，他可以輕鬆進入較低的輸入框而無需更改縮放。 – ripper234

如果這是您自己的頁面，您可以稍微更改一下，以便更輕鬆地完成JavaScript魔術。像if（input.offsetTop + input.offsetHeight> = bottomBox.offsetTop）window.scrollTo（0，bottomBox.offsetTop）這樣的語句將是所有需要在焦點上調用的語句。但是，在這裏，您將使用JavaScript而不是CSS來保持div在頁面上浮動。 –

這裏a solution by a friend of mine。

似乎在各種瀏覽器中運行良好。

仍然有一個小麻煩，即元素在選中時有更大的邊框，並且部分放大的邊界仍然隱藏。我總是可以在滾動中添加一個或多個像素，但我確定必須有更優雅的解決方案。

來源

2011-10-05 09:12:48 ripper234

如果您在每個文本框中添加onfocus處理函數，並驗證它們的位置是否與「底部框」元素過近或過遠，以及何時相應地更改了該div元素的位置（將其向下/向上移動）。

來源

2011-10-04 16:34:11

我只想用Z-指數彈出聚焦輸入固定的div上述

我不認爲這是上下移動屏幕的任何常見的方式，也許我錯了..

也許你可以用這樣的網頁內的鏈接做到這一點，因爲他們的目的是拉動屏幕下方，使用jQuery說：「當此輸入焦點轉到相應的錨點」

<a href="#box5"><input type="text" /></a>

來源

2011-10-04 16:46:16 Tules

我不想讓div上面的焦點輸入。我不認爲頁內鏈接也是最好的解決方案。 – ripper234

element.scrollIntoView();

在所有市長瀏覽器都支持

IE-6-7-8-9-10的Firefox，WebKit的

或：

element.focus(); element.blur();

來源

2011-10-05 09:16:01

不是我所需要的。看到我的測試答案：http://stackoverflow.com/questions/7650892/how-to-scovered-down-the-page-when-a-covered-input-box-is-focused/7659021#7659021 – ripper234

Ripper234的解決方案爲我工作很好。以下解決方案適用於其領域被其上方元素（例如固定導航）覆蓋而不是在其下方的任何人。

我還使用jQuery對其進行了動畫處理，並添加了一個填充變量，如果您想要顯示的字段上方有一個標籤，或者要將字段居中（只需將填充設置爲屏幕高度的一半）。

var navHeight = 200; 
var padding = 25; 
$('input').on('focus', function() { 
    try { 
    var elemTop = $(this).offset().top; 
    var maxVisible = $(document).scrollTop() + navHeight; 
    if (elemTop < maxVisible) { 
     $("html, body").animate({ scrollTop: elemTop - navHeight - padding }, 250); 
    } 
    } catch (e) { 
    console.log("Error: " + e); 
    } 
});

來源

2015-12-17 16:54:32 dlsso

如何在關注輸入框的情況下向下滾動頁面？

回答

相關問題