Problem with div inside/below scrollable div #350

jankoc · 2014-10-07T17:04:56Z

When IntroJs is used on an element inside a scrollable div, it looks like the position is calculated wrongly. See fiddle here:

http://jsfiddle.net/s9ypgo6c/1/

codinguncut · 2014-11-07T16:25:09Z

I have the same issue.
I am currently fixing it by defining a before-change-callback that does the scrolling manually:

$(container).animate({scrollTop: $elm.offset().top}, "slow");

It would be great if the scroll container could be added as a config option ({scrollContainer: '.asdf'})

mamezito-zz · 2014-11-07T16:27:44Z

can u plz provide jffidle with your solution to test? thanx

Siegrift · 2017-09-21T11:42:25Z

Hi, does anyone know how to solve this problem? Scrolling doesn't help as the problem lies in incorrect positioning of element. Problem is with the algorithm used in this function:

function _getOffset(element) {
    var elementPosition = {};

    var body = document.body;
    var docEl = document.documentElement;

    var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;

    if (element instanceof SVGElement) {
      var x = element.getBoundingClientRect()
      elementPosition.top = x.top + scrollTop;
      elementPosition.width = x.width;
      elementPosition.height = x.height;
      elementPosition.left = x.left + scrollLeft;
    } else {
      //set width
      elementPosition.width = element.offsetWidth;

      //set height
      elementPosition.height = element.offsetHeight;

      //calculate element top and left
      var _x = 0;
      var _y = 0;
      while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) {
        _x += element.offsetLeft;
        _y += element.offsetTop;
        element = element.offsetParent;
      }
      //set top
      elementPosition.top = _y;
      //set left
      elementPosition.left = _x;
    }

    return elementPosition;
  }

I have created a fiddle, which logs position using algorithm from http://stackoverflow.com/a/442474/37596 and using element.getBoundingClientRect()

Fiddle: http://jsfiddle.net/s9ypgo6c/8/

yundlu · 2017-12-11T23:31:52Z

has anyone solved this issue?

Scroll parent element to targetElement; resolves usablica#210; resolves usablica#350;

Scroll parent element to targetElement; resolves #210; resolves #350; resolves #373

plentylife · 2018-05-28T21:18:29Z

This or something very similar is happening to me with version 2.9.3

I have to manually change style.top for everything to align properly

46319943 · 2020-08-12T15:55:21Z

The same problem occurred when using version 2.9.3, and the situation was the same as in the jsfiddle example.
When the element exists in a scrollable div, and the element is not visible below the div, after startup, the div does not scroll, and the tip appears in the blank space below the div

Browser version: Microsoft Edge 84.0.522.52

vishwasracharya · 2024-01-12T07:06:28Z

Experiencing an issue with Intro.js version ^7.2.0. Has this been resolved, or is there an alternative solution? Could someone provide information on this matter? If fixed, do I need to modify my code for proper functionality? Are the latest changes/fixes deployed?

I have attached a video file for the issue which I am getting.

Video Link: https://github.com/usablica/intro.js/assets/84620359/e512faba-d5ae-45de-82f7-13c82785b629

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Basic usage</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
    <meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">

    <!-- styles -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="../assets/css/demo.css" rel="stylesheet">

    <link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js@7.2.0/minified/introjs.min.css">
    

    <style>
      .marketing {
        height: 30px;
        height: 40vh;
        margin-top: 500px;
        margin-top: 40vh;
        overflow: auto;
      }

      /* Additional styling for the table */
      table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
      }

      th, td {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
      }
    </style>
  </head>

  <body>

    <div class="container-narrow">

      <div class="masthead">
        <ul class="nav nav-pills pull-right">
          <li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
          <li><a href="https://github.com/usablica/intro.js">Github</a></li>
          <li><a href="https://twitter.com/usablica">@usablica</a></li>
        </ul>
        <h3 class="muted">Intro.js</h3>
      </div>

      <hr>

      <div class="jumbotron">
        <h1 data-step="3" data-intro="This is a tooltip!">Works with a Scrollable Element</h1>
        <p class="lead">This is the basic usage of IntroJs, with <code>data-step</code> and <code>data-intro</code> attributes.</p>
        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how</a>
      </div>

      <hr>

      <div class="marketing">
        <table>
          <tr>
            <th data-step="2" data-intro="Another step.">Section One</th>
            <td>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
            </td>
          </tr>
          <!-- Repeat the structure for other sections -->
  
          <!-- Example for Section Six with scrolling step -->
          <tr>
            <th data-step="1" data-intro="A scrolling step.">Section Six</th>
            <td>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
            </td>
          </tr>
  
          <tr>
            <th data-step="3" data-intro="Another scrolling step.">Section Seven</th>
            <td>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
            </td>
          </tr>
          
          <tr>
            <th data-step="4" data-intro="Another scrolling step.">Section Seven</th>
            <td>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
            </td>
          </tr>
          
          <tr>
            <th data-step="5" data-intro="Another scrolling step.">Section Seven</th>
            <td>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
            </td>
          </tr>
          
          <tr>
            <th data-step="6" data-intro="Another scrolling step.">Section Seven</th>
            <td>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
            </td>
          </tr>
  
          <!-- Repeat the structure for other sections -->
        </table>
      </div>
      <hr>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/intro.js@7.2.0/intro.min.js"></script>
  </body>
</html>

KevinAHM · 2025-01-02T01:27:07Z

This issue persists in Intro.js v8.1.0-beta.1, which is even more problematic than the CDN @ 7.2.0. When I target a UI element in a scrollable sidebar, JS Intro scrolls down so that the element as at the top scroll position, and then back up unnecessarily—even though the element is already visible and doesn’t require scrolling. It also highlights the section of the sidebar where the element was located (at the top). 7.2.0 corrects itself by the next element, but 8.1.0 continues for each sidebar element.

Update

Fixed it by adding this CSS to my sidebar
position: sticky;

c-johnson mentioned this issue Sep 10, 2015

Tour tooltip position inside elements with scroll is wrong #210

Closed

bozdoz self-assigned this Dec 12, 2017

bozdoz added bug duplicate labels Dec 12, 2017

sliceofbytes added a commit to sliceofbytes/intro.js that referenced this issue Feb 9, 2018

Merge pull request #1 from usablica/fix-scroll-elements

6e10e33

Scroll parent element to targetElement; resolves usablica#210; resolves usablica#350;

ipastushenko added a commit to ipastushenko/intro.js that referenced this issue Feb 15, 2018

Merge pull request #1 from ipastushenko/fix-scroll-elements

90a1a5c

Scroll parent element to targetElement; resolves usablica#210; resolves usablica#350;

bozdoz closed this as completed in b8cde24 Feb 23, 2018

bozdoz added a commit that referenced this issue Feb 23, 2018

Merge pull request #801 from usablica/fix-scroll-elements

e965a0d

Scroll parent element to targetElement; resolves #210; resolves #350; resolves #373

vishwasracharya mentioned this issue Jan 12, 2024

Scroll parent element to targetElement; resolves #210; resolves #350; resolves #373 #801

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Problem with div inside/below scrollable div #350

Problem with div inside/below scrollable div #350

jankoc commented Oct 7, 2014

codinguncut commented Nov 7, 2014

mamezito-zz commented Nov 7, 2014

Siegrift commented Sep 21, 2017 •

edited

Loading

yundlu commented Dec 11, 2017

plentylife commented May 28, 2018

46319943 commented Aug 12, 2020

vishwasracharya commented Jan 12, 2024

KevinAHM commented Jan 2, 2025 •

edited

Loading

Problem with div inside/below scrollable div #350

Problem with div inside/below scrollable div #350

Comments

jankoc commented Oct 7, 2014

codinguncut commented Nov 7, 2014

mamezito-zz commented Nov 7, 2014

Siegrift commented Sep 21, 2017 • edited Loading

yundlu commented Dec 11, 2017

plentylife commented May 28, 2018

46319943 commented Aug 12, 2020

vishwasracharya commented Jan 12, 2024

KevinAHM commented Jan 2, 2025 • edited Loading

Update

Siegrift commented Sep 21, 2017 •

edited

Loading

KevinAHM commented Jan 2, 2025 •

edited

Loading