<h3 dir="auto">Problem description</h3>
<p dir="auto">The menu is not located at the anchor when selecting a menu list item near the bottom of the list. (The problem only occurs with large lists)</p>
<p dir="auto">In the example if you select 'Callisto' it works, but anything below 'Ganymede' shifts the menu location upward. As a side note, if you scroll down to the bottom of the list there is horizontal scroll.<br>
<a href="https://www.webpackbin.com/bins/-Kq06NMipiyD2jLPRoew" rel="nofollow">https://www.webpackbin.com/bins/-Kq06NMipiyD2jLPRoew</a></p>
<h3 dir="auto">Versions</h3>
<ul dir="auto">
<li>Material-UI: <code class="notranslate">1.0.0-alpha.20</code></li>
<li>React: <code class="notranslate">15.4.1</code></li>
<li>Browser: <code class="notranslate">Google Chrome 58.0.3029.81</code></li>
</ul>
<p dir="auto">Version: next</p>
<p dir="auto"><code class="notranslate">&lt;Menu /&gt;</code> with scrolling list of items is not positioned correctly if the active item is deep in the scroll view.</p>
<p dir="auto"><a href="https://gfycat.com/ThinAffectionateAlbertosaurus" rel="nofollow">https://gfycat.com/ThinAffectionateAlbertosaurus</a></p>
<p dir="auto">Quick fix: <code class="notranslate">getContentAnchorOffset()</code> here <a href="https://github.com/callemall/material-ui/blob/next/src/internal/Popover.js#L344">https://github.com/callemall/material-ui/blob/next/src/internal/Popover.js#L344</a> should take <code class="notranslate">scrollTop</code> into account:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function getScrollParent(node, until) { // http://stackoverflow.com/questions/35939886/find-first-scrollable-parent
  if (node === null || node === until) {
    return null;
  }

  if (node.scrollHeight &gt; node.clientHeight) {
    return node;
  } else {
    return getScrollParent(node.parentNode);
  }
}
// ...
contentAnchorOffset = contentAnchorEl.offsetTop - scrollParent.scrollTop + (contentAnchorEl.clientHeight / 2) || 0;"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-en">getScrollParent</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">,</span> <span class="pl-s1">until</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-c">// http://stackoverflow.com/questions/35939886/find-first-scrollable-parent</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">node</span> <span class="pl-c1">===</span> <span class="pl-c1">null</span> <span class="pl-c1">||</span> <span class="pl-s1">node</span> <span class="pl-c1">===</span> <span class="pl-s1">until</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-c1">null</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-c1">scrollHeight</span> <span class="pl-c1">&gt;</span> <span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-c1">clientHeight</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-s1">node</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-en">getScrollParent</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-c1">parentNode</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>
<span class="pl-c">// ...</span>
<span class="pl-s1">contentAnchorOffset</span> <span class="pl-c1">=</span> <span class="pl-s1">contentAnchorEl</span><span class="pl-kos">.</span><span class="pl-c1">offsetTop</span> <span class="pl-c1">-</span> <span class="pl-s1">scrollParent</span><span class="pl-kos">.</span><span class="pl-c1">scrollTop</span> <span class="pl-c1">+</span> <span class="pl-kos">(</span><span class="pl-s1">contentAnchorEl</span><span class="pl-kos">.</span><span class="pl-c1">clientHeight</span> <span class="pl-c1">/</span> <span class="pl-c1">2</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> <span class="pl-c1">0</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Edit:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="contentAnchorOffset = contentAnchorEl.offsetTop - (scrollParent ? scrollParent.scrollTop : 0) + (contentAnchorEl.clientHeight / 2) || 0;"><pre class="notranslate"><span class="pl-s1">contentAnchorOffset</span> <span class="pl-c1">=</span> <span class="pl-s1">contentAnchorEl</span><span class="pl-kos">.</span><span class="pl-c1">offsetTop</span> <span class="pl-c1">-</span> <span class="pl-kos">(</span><span class="pl-s1">scrollParent</span> ? <span class="pl-s1">scrollParent</span><span class="pl-kos">.</span><span class="pl-c1">scrollTop</span> : <span class="pl-c1">0</span><span class="pl-kos">)</span> <span class="pl-c1">+</span> <span class="pl-kos">(</span><span class="pl-s1">contentAnchorEl</span><span class="pl-kos">.</span><span class="pl-c1">clientHeight</span> <span class="pl-c1">/</span> <span class="pl-c1">2</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> <span class="pl-c1">0</span><span class="pl-kos">;</span></pre></div>