data-scroll属性を指定したヘッダーに、ヘッダーの高さを超える子要素が存在するとき、スクロールの位置がずれる #69

saketi0906 · 2019-08-13T13:59:01Z

sweet-scrollをいつも使わせていただいています、使いやすいプラグインをありがとうございます。
初めてのissueで勝手が分からず、既におかしなことをしてしまってます。申し訳ないです。

さて、タイトルの問題についてですが、固定ヘッダーにドロップダウンを実装したところ発生しました。
固定されたヘッダーにdata-scroll属性を指定すると、以下のコードからヘッダーの高さを取得して、高さ分ずれた位置にスクロールされると思います。

var getHeight = function ($el) {
    return Math.max($el.scrollHeight, $el.clientHeight, $el.offsetHeight);
};

その際に、ヘッダーの中でヘッダーの高さを超えた子要素が存在する場合、子要素の高さがスクロールの計算に利用され、見た目上スクロールがおかしな位置で止まったように見える場合があります。これは、scrollHeightの高さが使われているため、発生する問題だと推察します。

そのため、getHeightメソッドで取得する高さはclientHeight、offsetHeightだけで取得するのが良いかと思うのですが、いかがでしょうか。scrollHeightが必要であるケースが想像できなかったので、issueを立てさせてもらいました。

var getHeight = function ($el) {
    return Math.max($el.clientHeight, $el.offsetHeight);
};

以下、今回の現象が再現するコードです。Safari、Chromeの最新版、バージョンは4.0.0で確認しています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      margin: 0;
    }
    header {
      position: fixed;
      left: 0;
      top: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 5rem;
      padding: 0 1rem;
      background: #eee;
      box-sizing: border-box;
    }
    .menu {
      position: relative;
    }
    .menu__child {
      position: absolute;
      right: 0;
      top: 100%;
      width: 5rem;
      height: 10rem;
      background: orange;
      visibility: hidden;
      opacity: 0;
      transition: 1s;
    }
    .menu:hover .menu__child {
      visibility: visible;
      opacity: 1;
    }
    section {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 50rem;
    }
    section:first-of-type {
      background: #ddd;
    }
    section:last-of-type {
      background: #ccc;
    }
  </style>
</head>

<body>
  <header data-scroll-header>
    <p>Header</p>
    <div class="menu">
      <p>menu</p>
      <div class="menu__child"></div>
    </div>
  </header>
  <main>
    <section>
      <p>First</p>
      <a href="#second" data-scroll>to Second</a>
    </section>
    <section id="second">
      <p>Second</p>
    </section>
  </main>

  <script src="sweet-scroll.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => new SweetScroll(), false);
  </script>
</body>
</html>

スクリーンショット

The text was updated successfully, but these errors were encountered:

saketi0906 closed this as completed Aug 13, 2019

saketi0906 reopened this Aug 13, 2019

saketi0906 changed the title ~~headerオプションををにスクロール位置がずれる~~ headerオプションを有効にした時にスクロール位置がずれる Aug 13, 2019

saketi0906 changed the title ~~headerオプションを有効にした時にスクロール位置がずれる~~ data-scroll属性を指定したヘッダーに、ヘッダーの高さを超える子要素が存在するとき、スクロールの位置がずれる Aug 13, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

data-scroll属性を指定したヘッダーに、ヘッダーの高さを超える子要素が存在するとき、スクロールの位置がずれる #69

data-scroll属性を指定したヘッダーに、ヘッダーの高さを超える子要素が存在するとき、スクロールの位置がずれる #69

saketi0906 commented Aug 13, 2019 •

edited

Loading

data-scroll属性を指定したヘッダーに、ヘッダーの高さを超える子要素が存在するとき、スクロールの位置がずれる #69

data-scroll属性を指定したヘッダーに、ヘッダーの高さを超える子要素が存在するとき、スクロールの位置がずれる #69

Comments

saketi0906 commented Aug 13, 2019 • edited Loading

スクリーンショット

saketi0906 commented Aug 13, 2019 •

edited

Loading