javascript - Accordion :自动滚动到 Pane 内容的顶部

Question

当使用带有大 Pane 的 Accordion 时，选择一个 Pane 会将您带到其底部内容，并将顶部内容排除在屏幕的可见范围之外。强制用户每次选择 Pane 时向上滚动。

选择 Pane 时是否可以自动滚动到 Pane 内容的顶部？

Accordion 可用:https://jsfiddle.net/4hqv4eao/4/

require([
    "dijit/layout/AccordionContainer",
    "dijit/layout/ContentPane",
    "dojo/ready"
  ],
  function(AccordionContainer, ContentPane, ready) {

    ready(function() {

      var acc = new AccordionContainer({}, "accordion");

      acc.addChild(new ContentPane({
        title: "Title 1",
      }, "pane1"));

      acc.addChild(new ContentPane({
        title: "Title 2",
      }, "pane2"));

      acc.addChild(new ContentPane({
        title: "Title 3",
      }, "pane3"));      

      acc.addChild(new ContentPane({
        title: "Title 4",
      }, "pane4"));        

      acc.startup();
    });

  });

Answer 1

对每个 Pane 使用单击函数(我使用了for循环和className dijitAccordionInnerContainer)，您可以获得 Accordion 的y位置(我使用了here中的函数获取准确的 y 位置)并使用 javascripts scrollBy method 。

这是获取准确位置的函数(感谢 kirupa):

// Helper function to get an element's exact position
function getPosition(el) {
  var xPos = 0;
  var yPos = 0;

  while (el) {
    if (el.tagName == "BODY") {
      // deal with browser quirks with body/window/document and page scroll
      var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
      var yScroll = el.scrollTop || document.documentElement.scrollTop;

      xPos += (el.offsetLeft - xScroll + el.clientLeft);
      yPos += (el.offsetTop - yScroll + el.clientTop);
    } else {
      // for all other non-BODY elements
      xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
      yPos += (el.offsetTop - el.scrollTop + el.clientTop);
    }

    el = el.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}

这是我添加的用于滚动到 Accordion 顶部的代码:

var panes;
var pane;
panes = document.getElementsByClassName('dijitAccordionInnerContainer');

for (var i = 0; i < panes.length; i++) {
  panes[i].addEventListener('click', function(e) {
    pane = this;
    setTimeout(function() {
      window.scrollBy(0, getPosition(pane).y);
    }, 200);
  });
}

我使用了setTimeout函数，因此 Accordion 将在获取其位置之前完成更新(可能有更好的方法来做到这一点)。

这是 updated fiddler 。