閲覧ありがとうございます。

問題

IEでスムーズスクロールを有効にした状態で、height:17.1px;の水平スクロールバーをスクロールすることができません。(ノブでは操作できるが、それ以外の部分のクリック、◀︎ボタン、▶︎ボタンの押下が反応しない)

height:18px;だとそれは問題なく動作します。

目的

ダミーのスクロールバーを作るためです。

height:17px;だとIEのスクロールバーが17pxなので潰れてしまい、理論的には17pxより大きい必要があり、17.1pxとしています。

お願い

私にはその理由を説明することができません。たとえ違っても考えられる可能性など教えて頂けると嬉しいです。

よろしくお願いいたします。

再現手順

  1. IE11の右上⚙(歯車)ボタンを押下
  2. インターネットオプション タブ：詳細設定
  3. 項目カテゴリ：ブラウズ　項目：スムーズスクロールを使用する
  4. チェックを入れる
    （height:17.1px;での正常な動作を見たければチェックを外す）
  5. 以下のソースを開く

Source code

<!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>
      .scroll-box {
        width: 500px;
        overflow-x: scroll;
      }
      #box-1 {
        height: 18px;
      }
      #box-2 {
        height: 17.1px;
      }
      .dummy {
        height: 100%;
        width: 5000px;
      }
    </style>
  </head>
  <body>
    <!-- IE(Enable smooth scroll):OK / IE(Disable smooth scroll):OK-->
    <h2>height:18px</h2>
    <div id="box-1" class="scroll-box">
      <div class="dummy"></div>
    </div>

    <!-- IE(Enable smooth scroll):NG / IE(Disable smooth scroll):OK-->
    <h2>height:17.1px</h2>
    <div id="box-2" class="scroll-box">
      <div class="dummy"></div>
    </div>
  </body>
</html>