Skip to content

Proposal for specifying scrolling end position

Mengyuan(Joanna) Wu edited this page Mar 23, 2015 · 5 revisions

Use Case

A Web developer might want to specify the end position of a scroll event, esp. one triggered by clicking cross-referencing links (hash links), as the current browser behavior - the browser scrolls to where the :target element is placed flush with the top of the browser window - disrupts reading.

Applicable Sites and Current Solution

  1. Project documentation (eg. Apache Spark)

http://spark.apache.org/docs/latest/graphx-programming-guide.html

When we click a title, at the first time it will jump into the 'correct' position, however, the second time it won't. Related code is:

function maybeScrollToHash() {
  console.log("HERE");
  if (window.location.hash && $(window.location.hash).length) {
    console.log("HERE2", $(window.location.hash),
$(window.location.hash).offset().top);
    var newTop = $(window.location.hash).offset().top - 57;
    $(window).scrollTop(newTop);
  }
}

The event listener is hashchange, I don't think it's a good solution (57 is a magic number). Meanwhile, in my opinion this kind of problems should be solved by CSS.

  1. GitHub source view

https://github.com/v8/v8-git-mirror/blob/master/include/v8.h#L243

This effect is also achived by javascript, following is the related code in github-xxxxxxx.js:

  $(window).scrollTop(s.offset().top - .33 * $(window).height())

So there is the same issue, same url may jump to different position.

Possible Solution: New Property

  1. Xidorn 的思路 → https://lists.w3.org/Archives/Public/public-html-ig-zh/2015Feb/0003

  2. 原来 Kenny 的思路 → https://lists.w3.org/Archives/Public/public-html-ig-zh/2015Jan/0004