当使用带有大 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();
});
});
最佳答案
对每个 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 。
关于javascript - Accordion :自动滚动到 Pane 内容的顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48344600/