7

上部の固定ナビゲーションメニュー（ページをスクロールしますが、上部は固定されたままです）とhttp://reactiveraven.github.com/jqBootstrapValidation/を使用して単純なフォーム検証スタイルを設定するTwitterBootstrapを使用してフォームを作成しています。

しかし、私が直面している問題は、「このフィールドに入力してください」という検証バルーンがポップアップすると、ブラウザがページの最上部にある入力ボックスの位置までスクロールされることです。通常の状態では、これは問題ありませんが、私のメニュー設定のために非表示になっています。このスクロールを引き継いでオフセットを追加し、これが発生しないようにする方法はありますか？

4

2 に答える 2

9

私はまったく同じ設定で作業していますが、form要素を使用してこれを行う簡単な方法はないことがわかりました。input私のハックは、無効な//を監視し、selectそこtextareaから何かが発火することでした。これは、特に無効な入力が多い場合には最善の修正ではありませんが、必要なものを見つけるのに役立ちました。うまくいけば、誰か他の人がやって来て、それを少しきれいにすることができるでしょう。

function scrollToInvalid() {
  // Height of your nav bar plus a bottom margin
  var navHeight = 60;
  // Offset of the first input element minus your nav height
  var invalid_el = $('input:invalid').first().offset().top - navHeight;

  // If the invalid element is already within the window view, return true. If you return false, the validation will stop.
  if ( invalid_el > (window.pageYOffset - navHeight) && invalid_el < (window.pageYOffset + window.innerHeight - navHeight) ) {
    return true;
  } else {
    // If the first invalid input is not within the current view, scroll to it.
    $('html, body').scrollTop(invalid_el);
  }
}

$('input').on('invalid', scrollToInvalid);
于 2013-02-19T22:00:44.853 に答える
2

これは、html要素の単純なcssで実行できます

html {
  scroll-padding-top: 100px;
}

scroll-padding-bottom: 100px;粘着性のあるフッターがある場合も同様に使用してください

コース外のIEを除くすべての最新のブラウザで動作します。詳細については、こちらを参照してください https://css-tricks.com/almanac/properties/s/scroll-padding/

于 2021-03-12T12:36:54.583 に答える