All geek questions in one place

Avoid unwanted scrolling caused by keyboard navigation in IE?

I have an HTML page that has a <div> that contains content that is wider than itself; the excess becomes invisible with the overflow: hidden style.

There may be links in this content. In IE8 (but not in Firefox 3.6), if you use the keyboard (i.e. the Tab key) to focus on the link cropped to the right edge, IE will scroll the entire div on the left far enough to make the entire link visible. (The same thing happens with links on the left, when they get focus, if the div is already scrolling to the left - it scrolls the contents to the right to show the whole link.)

I can try to hide this unwanted scrolling by setting the scrollLeft value to div when it comes out of the way - jQuery makes it easy. But I would prefer, if possible, to use a style or setting to prevent scrolling in the first place. As already mentioned, Firefox does not view a partially cropped link when it focuses. Ideally, IE should behave the same.

HTML example below. In IE, use Tab (or Shift + Tab) to alternately set the focus on each link to see how the contents of the window shift sideways.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Demo of undesired scrolling</title> </head> <body> <a href="http://www.w3.org">Before</a> <div style="width: 400px; border: 1px solid gray; overflow: hidden;"> <div> <div style="width: 450px; text-align: center;"> <a href="http://www.w3.org">Somewhere in the middle</a> </div> <div style="width: 450px; text-align: left;"> <a href="http://www.w3.org">Over on the left</a> </div> <div style="width: 450px; text-align: right;"> <a href="http://www.w3.org">Over on the right</a> </div> </div> </div> <a href="http://www.w3.org">After</a> </body> </html>

Thanks in advance for your understanding!

+3
source share
2 answers

I don't think there is any “natural” way to prevent scrolling, but you have several options with JS:

Option number 1

  • Make sure the link is not displayed in the onfocus event.
  • If this is out of sight, just blur it or, preferably, find the next valid link and center it. Demo: http://jsfiddle.net/cwolves/eHTVV/2/
  • If your links are partially visible, it will be strange because they will be inaccessible.

Option number 2

  • reset the scroll position in the onscroll event of the div container in all situations except scrolling with jQuery.

  • You will need to save a variable that has the correct scroll position in jquery animation events, for example:

     var correctXOffset = 0; myDiv.animate({ left: 500 }, function(){ correctXOffset = this.offsetLeft; });

  • Demo: http://jsfiddle.net/eHTVV/3/

  • All links outside the view will still be selectable, but you won’t be able to see them, but I suppose other browsers look like this.

Option number 3

  • Remove invisible links from pointer pointer when your div scrolls, for example:

     myDiv.animate({ left : 500 }, function(){ $('.invisiblePage a').prop('tabIndex', -1); $('.visiblePage a' ).removeProp('tabIndex'); });

  • As option # 1, links will become inaccessible

Option number 4

  • clip : rect(0px 400px 400px 0px); content using CSS: clip : rect(0px 400px 400px 0px);
  • The container should be absolutely
  • somewhat complicated JS must configure this property
  • demo: http://jsfiddle.net/cwolves/eHTVV/5/
+6
source

Can you not just paste everything inside the containing div?

I fixed the scroll problem this way ... replace this:

  <div style="width: 400px; text-align: right;">

for line 16 in your example.

Does it help?

0
source

Source: https://habr.com/ru/post/1441048/

More articles:


All Articles