{"id":2802,"date":"2013-02-13T17:54:53","date_gmt":"2013-02-13T23:54:53","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=2802"},"modified":"2014-01-13T16:05:29","modified_gmt":"2014-01-13T22:05:29","slug":"scrolling-to-cross-browser-ranges","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2013\/02\/13\/scrolling-to-cross-browser-ranges\/","title":{"rendered":"Scrolling to Cross-browser Ranges"},"content":{"rendered":"

One thing I wanted to add to my bililiteRange<\/code><\/a> was the ability to scroll the range into view without changing the selection. As with all things having to do with ranges, there's no consistent way to do it, and Internet Explorer does it best<\/em> (this is the only time you'll hear me say that).<\/p>\r\n\r\n

For IE, the TextRange<\/code><\/a> object supports scrollIntoView<\/code><\/a>, so all you need to do is:<\/p>\r\n

range.scrollIntoView()<\/code><\/pre>\r\n
and you're done.<\/p>\r\n
In bililiteRange<\/code> I don't actually use this, since scrollIntoView()<\/code> scrolls to the top of the screen no matter what, and I want to only scroll if the range isn't already visible. To do that, I need to set the scrollTop<\/code> of the element appropriately; the formula is:<\/p>\r\n
var top = range.boundingTop - element.offsetTop + 2*element.scrollTop;<\/code><\/pre>\r\n
The double adding element.scrollTop<\/code> is a documented IE bug<\/a>. Then we can test to scroll if needed:<\/p>\r\n
if (element.scrollTop > top || element.scrollTop+element.clientHeight < top){\r\n  element.scrollTop = top;\r\n}<\/code><\/pre>\r\n\r\n
Standards-based browsers use Range<\/a> objects, and they have no scrollIntoView<\/code>. But we can create a dummy element, insert it into the range, and scroll to that:<\/del><\/p>\r\n
\r\n\/\/ Note: don't do this! It messes up the selection\r\nvar span = document.createElement('span');\r\nrange.insertNode(span);\r\nspan.scrollIntoView();\r\nspan.parentNode.removeChild(span);<\/code><\/pre>\r\n\r\n
Edit 2014-01-09<\/strong>: It turns out that there's odd behavior with the selection if you modify the DOM<\/a>. While the above approach is simple if that's not a problem, the right way is with (where element<\/code> is the parent element that does the scrolling):<\/p>\r\n\r\n
var top = range.getBoundingClientRect().top - element.offsetTop + element.scrollTop;<\/code><\/pre>\r\n
And set element.scrollTop<\/code> if necessary, as above.<\/p>\r\n\r\n
If the range is empty, you have to temporarily insert some text to make it have a clientRect<\/code>, os the actual code is:<\/p>\r\n\r\n
if (range.toString() == ''){\r\n\tvar textnode = this._doc.createTextNode('X');\r\n\trng.insertNode (textnode);\r\n}\r\nvar top = range.getBoundingClientRect().top - element.offsetTop + element.scrollTop;\r\nif (textnode) textnode.parentNode.removeChild(textnode);<\/code><\/pre>\r\n
This method fails, unfortunately, if the parent element is absolutely positioned. As of 2014-01-13, I use an easier method that creates a dummy range at the beginning of the element and subtract its getBoundingClientRect().top<\/code> from that of the target range. See the bililiteRange source<\/a> for IERange.prototype._nativeTop() and W3CRange.prototype._nativeTop()<\/code> for details\r\n\r\n\r\n\r\n
But the hardest part is scrolling a <textarea><\/code>. There's no good way to scroll to a selection in a text area, and there's no equivalent of getBoundingClientRect<\/code><\/a> so we can use scrollTop<\/code><\/a> to scroll to the right place. I don't know where I found this clever hack, but it solves that problem: scrollHeight<\/code><\/a> gives the total height of the text in a <textarea><\/code> if it overflows, so we can set the height to 1px (forcing the overflow), truncate the value<\/code> to the text before<\/em> the range we care about, and measure scrollHeight<\/code>. This will be the bottom of the beginning of the range, in pixels from the top of the <textarea><\/code>. We want the top of the range, so subtract the line height (which we get as the scrollHeight<\/code> of a one-line <textarea><\/code>):<\/p>\r\n
var style = getComputedStyle(textareaElement);\r\nvar oldheight = style.height;\r\nvar oldval = textareaElement.value;\r\ntextareaElement.style.height = '1px';\r\ntextareaElement.value = oldval.slice(0, rangeStart);\r\nvar top = textareaElement.scrollHeight;\r\ntextareaElement.value = 'X';\r\ntop -= textareaElement.scrollHeight;\r\ntextareaElement.style.height = oldheight; \/\/ restore the element before anyone notices. May have a brief flash\r\ntextareaElement.value = oldval;\r\n\/\/ scroll into position if necessary as above\r\nif (textareaElement.scrollTop > top || textareaElement.scrollTop+textareaElement.clientHeight < top){\r\n\ttextareaElement.scrollTop = top;\r\n}<\/code><\/pre>\r\n
Now the <textarea><\/code> is scrolled correctly.<\/p>\r\n\r\n\r\n
But we may still want to make sure that the element itself<\/em> is scrolled into view. We can't just use scrollIntoView<\/code> straight, since that shows the top of the element, and the range may be at the bottom. In bililiteRange<\/code> I don't worry about that (bililiteRange.scrollIntoView()<\/code> only scrolls within the element). If you want to take care of that, create a dummy element as above, absolutely position it at the desired location, and scroll to that:<\/p>\r\n
\/\/ get the position as in jQuery.offset\r\nvar rect = textareaElement.getBoundingClientRect();\r\nrect.top += window.pageYOffset - document.documentElement.clientTop;\r\nrect.left += window.pageXOffset - document.documentElement.clientLeft;\r\n \/\/ create an element to scroll to\r\nvar div = document.createElement('div');\r\ndiv.style.position = 'absolute';\r\ndiv.style.top = (rect.top+top-textareaElement.scrollTop)+'px'; \/\/ adjust for how far in the range is; it may not have scrolled all the way to the top\r\ndiv.style.left = rect.left+'px';\r\ndiv.innerHTML = '&nbsp;'; \/\/ scrollIntoViewIfNeeded won't scroll if there's no content (it's not needed!)\r\ndocument.body.appendChild(div);\r\ndiv.scrollIntoViewIfNeeded ? div.scrollIntoViewIfNeeded() : div.scrollIntoView();\r\ndiv.parentNode.removeChild(div);<\/code><\/pre>\r\n
For <textarea><\/code>s you may also want to save the original selection with selectionStart<\/code> and selectionEnd<\/code> and restore it with setSelectionRange<\/code>, since it will change when the text is truncated. In bililiteRange<\/code> I create a dummy element that is a clone of the original, so the selection doesn't change.<\/p>\r\n
And this ugly mess seems to work correctly. Hope some of this analysis is useful to someone.<\/p>","protected":false},"excerpt":{"rendered":"One thing I wanted to add to my bililiteRange was the ability to scroll the range into view without changing the selection. As with all things having to do with ranges, there's no consistent way to do it, and Internet Explorer does it best (this is the only time you'll hear me say that).","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2802"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=2802"}],"version-history":[{"count":20,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2802\/revisions"}],"predecessor-version":[{"id":3163,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2802\/revisions\/3163"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=2802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=2802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=2802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}