1

我对引导程序有疑问。

我的页面很长，而且游览也需要在移动设备上运行。不幸的是，引导游览功能scrollIntoView()根本无法正常工作，就好像我在页面顶部一样，它不会向下滚动直到我想要突出显示的元素。

这是 _scrollIntoView 引导程序代码：

Tour.prototype._scrollIntoView = function(element, callback) {
      var $element, $window, counter, offsetTop, scrollTop, windowHeight;
      $element = $(element);
      if (!$element.length) {
        return callback();
      }
      $window = $(window);
      offsetTop = $element.offset().top;
      windowHeight = $window.height();
      scrollTop = Math.max(0, offsetTop - (windowHeight / 2));
      this._debug("Scroll into view. ScrollTop: " + scrollTop + ". Element offset: " + offsetTop + ". Window height: " + windowHeight + ".");
      counter = 0;
      return $('body, html').stop(true, true).animate({
        scrollTop: Math.ceil(scrollTop)
      }, (function(_this) {
        return function() {
          if (++counter === 2) {
            callback();
            return _this._debug("Scroll into view.\nAnimation end element offset: " + ($element.offset().top) + ".\nWindow height: " + ($window.height()) + ".");
          }
        };
      })(this));
    };

我一直在到处寻找这个问题，并且已经尝试了一些建立在引导程序支持页面上的建议，但没有。

默认的 scrollTop 值如下：

scrollTop = Math.max(0, offsetTop - (windowHeight / 2));

基本上它计算元素偏移量并将其滚动到窗口的中间。现在，我认为我遇到的问题是，如果偏移量很长（假设在具有 window.height() 480px 的小型移动设备上为 1100px），则上述结果将1100 - (480/2) = 860px仍然低于视口。

对于在任何情况下和任何设备上我应该使用什么公式将元素滚动到可靠的视口内部，您有什么建议吗？

这是我到目前为止所尝试的：

var offsetTop = $element.offset().top;
$('body, html').animate({
 scrollTop: scrolltop},300);

我尝试了这些不同的scrolltop公式：

var scrollTop = (windowHeight / 2) + (offsetTop - windowHeight) + $element.height()
var scrolltop = (windowHeight / 2) + (offsetTop - windowHeight)
var scrollTop = (windowHeight / 2) + (offsetTop - windowHeight) - $element.height()
var scrollTop = $element.height()

但直到现在还没有运气。

提前感谢您的任何帮助或建议

4

0 回答 0