9

Tab キー (および Shift + Tab) を使用してフォーム要素またはアンカー間を移動すると、ブラウザーはフォーカスされた要素まで自動的にスクロールします。オーバーフローが非表示に設定されているオーバーフロー コンテンツの一部であるために要素が表示できない場合は、コンテンツのコンテナーを移動 (またはスクロール) して、フォーカスされた要素を表示します。この動作を停止するか、無効にする方法を見つけたい

ここに、問題を紹介するためにまとめたものがあります。Chromeで再現しました。

https://jsfiddle.net/charlieko/wLy7vurj/2/

var container = $("#container")
var cur = 0;

function go(increment) {
  var next = cur + increment;
  if (next < 0) next = 4;
  else if (next > 4) next = 0;
  cur = next
  var newX = cur * 500;
  container.css({
    transform: 'translate(-' + newX + 'px, 0)'
  })
}

$("#left").click(function(e) {
  go(-1);
});
$("#right").click(function(e) {
  go(1);
});
body {
  overflow: hidden;
}
#container {
  width: 2600px;
  overflow: none;
  transition: transform 0.4s;
  transform: translate(0, 0);
  overflow: hidden;
  margin: 0;
}
li {
  width: 500px;
  text-align: center;
  list-style-type: none;
  float: left;
  margin: 0;
  padding: 0;
}
a {
  color: black;
  font-size: 2.0rem;
}
#ui {
  position: fixed;
  top: 200px;
}
#ui span {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <ul>
    <li><a href="#">Link 1</a> | ABCD EFG</li>
    <li><a href="#">Link 2</a> | HIJK LMNO</li>
    <li><a href="#">Link 3</a> | PQRSTU VW</li>
    <li><a href="#">Link 4</a> | XYZA BC</li>
    <li><a href="#">Link 5</a> | DEFG HI</li>
  </ul>
</div>
<div id="ui">
  <div>
    <span id="left">Left</span>
    |
    <span id="right">Right</span>
  </div>
  <p>
    Use left and right to move. Issue: Use tab key (and shift+tab) to navigate to any of the links. The container of the links shift to show the focused link. Notice the content is decentered when it happens.
  </p>
</div>

問題は、コンテンツをスライドさせる方法が 2 つあることです。左右のボタンを操作する方法と、リンクをタブで移動する方法です。ユーザーがタブを使用してナビゲートすることを選択すると、スライド ロジックが台無しになります。コンテンツの中心がずれており、変数に保存したインデックスは、画面に表示されているものを表していません。onFocus イベントを使用してプログラムでアクセシビリティの問題を処理できるため、この自動動作は何の役にも立ちません。

この動作を停止する方法はありますか? アンカー要素の onFocus イベントで preventDefault() メソッドを既に試しました。

4

4 に答える 4

9

解決策を思いつくことができました。ブラウザーが行うことは、オーバーフローしたコンテンツの直接の親をその位置までスクロールして、フォーカスされた要素が中央に来るようにすることです。親要素のプロパティを変更するだけscrollLeftでうまくいきました。したがってonFocus、リンクの場合：

function onFocus (e) {
    document.getElementById('content-parent').scrollLeft = 0;
    // Code for repositioning the content itself using transform with transition animation
}
于 2016-04-13T15:52:21.420 に答える
0

Overflow:hidden は通常、スクロールや移動を目的としたコンテンツに適しているため、これを防ぐのは困難です。タブ コントロールを表示されているもの (スライダーを更新するボタンやリンクを含む) だけにとどめたい場合は、オーバーフローに加えて (またはオーバーフローの代わりに) コンテンツを非表示にする別の方法が必要になります。

リスト項目が div#container の開いている/表示されている部分に収まるまで、display:none を試してください。これにより、準備が整うまで、それらが DOM から削除されます (したがって、キーボード フォーカスからも削除されます)。display:none だけを含む 'hidden' というクラスを作成する場合、必要なスクリプトは、左/右コントロールが使用されているときにリスト項目からクラスを追加/削除することだけです。コードサンプルを編集してデモを行いますが、現在は小さな画面にいます。

問題は、キーボード ユーザーが左/右コントロールにアクセスできないことです。これらをボタンまたはリンク要素に変更すると、デフォルトですべてのブラウザーでキーボードがサポートされます。そして、マウスまたはキーボードのどちらを使用しているかに関係なく、すべてのユーザーが左/右コントロールに依存しているため、各段階での外観をより詳細に制御できます。

于 2016-04-07T11:37:12.763 に答える