[Javascript] HTML固定頭部擋到表單錨點 – HTML5 input required is blocked by Fixed Header/Navbar

問題情境

在做 HTML5 input required 送出檢查時,網頁錨點捲動是以物件做TOP定位點,可能會被 Fixed Header/Navbar 擋到。


解決方法

使用scrollIntoView override方法:

var elements = document.querySelectorAll('input,select,textarea');

for (var i = elements.length; i--;) {
    elements[i].addEventListener('invalid', function () {
        this.scrollIntoView(false);
    });
}

jsfiddle

Leave a Reply

Your email address will not be published. Required fields are marked *