Question

我遇到了bootstrap之旅的问题。

我有一个很长的页面，游览也需要在移动设备上工作。不幸的是，引导程序游览函数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));
    };

我一直在寻找这个问题，并且已经尝试了一些基于bootstrap tour支持页面的建议，但没有。

默认的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()

但直到现在还没有运气。

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

在视口引导程序游览中滚动

0 个答案: