sorich87 / bootstrap-tour

Quick and easy product tours with Twitter Bootstrap Popovers
http://bootstraptour.com
MIT License
4.43k stars 941 forks source link

Scroll to a step isn't working when "placement: auto" #738

Open pierreonthenet opened 4 years ago

pierreonthenet commented 4 years ago

When placement of a step is set to "auto", the scroll to this step won't work : we need to set it to top, bottom, left or right. If "auto" is set, then it will scroll to 0 (the top of page).

Here is the code in Tour.prototype._scrollIntoView (v0.12.0) :

      scrollTop = 0;
      switch (step.placement) {
        case 'top':
          scrollTop = Math.max(0, offsetTop - (windowHeight / 2));
          break;
        case 'left':
        case 'right':
          scrollTop = Math.max(0, (offsetTop + height / 2) - (windowHeight / 2));
          break;
        case 'bottom':
          scrollTop = Math.max(0, (offsetTop + height) - (windowHeight / 2));
      }
      this._debug("Scroll into view. ScrollTop: " + scrollTop + ". Element offset: " + offsetTop + ". Window height: " + windowHeight + ".");
MrLewk commented 3 years ago

Just came across this issue, as it's been bugging me for days now. Hopefully a fix can be put in as anything I've tried has failed so far :(

roberto-renovato commented 1 month ago

Add this before the code you pasted:

var autoToken = /\s?auto?\s?/i;
var autoPlace = autoToken.test(step.placement);
if (autoPlace) step.placement = step.placement.replace(autoToken, '') || 'top';

or, simply:

step.placement = step.placement.replace(/\s?auto?\s?/i, '') || 'top';