Question

当我点击一个按钮时，我试图弄清楚jquery滚动div的确切中心。目前我只能使用声明的偏移滚动到X和Y坐标。这意味着我必须根据您使用的设备（大型显示器，笔记本电脑，ipad，iphone）重新声明jquery中的X和Y，并且它也不会完全位于中心。

我知道这与声明窗口高度和窗口宽度除以2的变量有关，但我正努力使其在SO上使用答案。

var wWidth = $(window).width();
var wHeight = $(window).height();

Codepen：https://codepen.io/artchibald/pen/ddKVNw

感谢。

Answer 1

你使用div的宽度和高度的一半是正确的。所以它可能变成：

clickmeVar.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:"#myDiv", offsetY: $(window).innerHeight() / 2 - $('#myDiv').height() / 2, x:"#myDiv", offsetX: $(window).innerWidth() / 2 - $('#myDiv').width() / 2, autoKill:false}},100);
};

或者没有jQuery选择器：

clickmeVar.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:"#myDiv", offsetY: window.innerHeight / 2 - document.querySelector('#myDiv').clientHeight / 2, x:"#myDiv", offsetX: window.innerWidth / 2 - document.querySelector('#myDiv').clientWidth / 2, autoKill:false}},100);
};

这里我们使用可见屏幕宽度和高度的一半，减去元素宽度和高度的一半。

这是一个有效的例子：

var clickmeVar = document.getElementById("clickme");
var windowheight = $(window).height();
var windowwidth = $(window).width();
var pagecenterW = windowwidth/2;
pagecenterW=pagecenterW/2;
var pagecenterH = windowheight/2;
pagecenterH=pagecenterH/2;

clickmeVar.onclick = function() {
TweenLite.to(window, 1, {scrollTo:{y:"#myDiv", offsetY: $(window).innerHeight() / 2 - $('#myDiv').height() / 2, x:"#myDiv", offsetX: $(window).innerWidth() / 2 - $('#myDiv').width() / 2, autoKill:false}},100);
};
//      $("#myDiv")
//      .css({top: pagecenterH + 'px', left: pagecenterW+ 'px'});

body {
  width: 3000px;
  height:2000px;
  background:blue;
}
#myDiv {
  width:100px;
  height:100px;
  background:red;
  position:relative;
  left:800px;
  top:1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollToPlugin-latest-beta.js"></script>

<button id="clickme">click here to put the red square exactly in the center of the viewport</button>
<div id="myDiv"></div>

ScrollTo.js：滚动到div的确切中心

1 个答案: