如何获取和设置当前网页滚动位置?
我有一个很长的表单,需要根据用户操作/输入进行刷新.当发生这种情况时,页面会重置到最顶层,这对用户来说很烦人,因为他们必须向下滚动到他们所处的位置.
如果我可以在页面重新加载之前捕获当前滚动位置(在隐藏的输入中),我可以在重新加载后将其设置回来.
我用D3遇到了很多这个问题.很多时候我喜欢在我的SVG上叠加HTML对象.
我目前的策略是在名为.html-overlay的SVG元素旁边创建一个空DIV.我根据我在主图形的SVG中设置的内部填充来定位它(例如:20px).然后我使用以下函数(使用jQuery)来确定HTML元素应该去的位置:
//element is the object returned by D3 .append()
var getOffset: function(element) {
var $element = $(element[0][0]);
return {
left: $element.offset().left - $('.html-overlay').offset().left,
top: $element.offset().top - $('.html-overlay').offset().top
};
}
Run Code Online (Sandbox Code Playgroud)
我想知道,必须有一些内部(非jQuery依赖)方式来快速获得元素的偏移量.它非常有用(特别是在元素经过多次翻译,旋转,缩放等之后)
具有用于计算元素的"中心"的偏移,元素的最高点,最底部,最左边,最右边等的函数也是很好的.
注意:
由于某些原因,getBoundingClientRect()没有给出正确的数字:
var $element = $(element[0][0]);
console.log($element.offset(), element[0][0].getBoundingClientRect())
Object
left: 328
top: 248.8333282470703
__proto__: Object
ClientRect
bottom: 376.83331298828125
height: 139.99998474121094
left: 328
right: 478
top: 236.8333282470703
width: 150
Run Code Online (Sandbox Code Playgroud)