手风琴:自动滚动到窗格内容顶部

Question

当使用带有大窗格的手风琴时，选择一个窗格将带您到达其底部内容，并将顶部内容从屏幕的可见性中剔除。强制用户每次选择窗格时向上滚动。

选择窗格时可以自动滚动到窗格内容的顶部吗？

手风琴可在此提供：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

使用每个窗格的单击函数(我使用了for loop和className dijitAccordionInnerContainer)，您可以得到手风琴y的位置(我从这里获得确切的y位置)并使用javascripts scrollBy法。

下面是得到确切位置的函数(感谢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
  };
}

下面是我添加到手风琴顶部的代码：

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函数，这样手风琴将在获得它的位置之前完成更新(可能有一个更好的方法)。

这是最新提琴手。