如何在 HTML5 日期输入上禁用具有 webshim 回退的滚动

Question

我尝试在 HTML5 日期输入上禁用滚动，但没有成功。
此输入有一个 webshim 回退，这导致我的 JS 使用 Chrome，但不能使用 Firefox。

$('.input-date input').on('mousewheel', function (event) {
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webshim/1.15.6/dev/polyfiller.js"></script>

<script type="text/javascript">
  webshims.cfg.no$Switch = true;
  webshim.setOptions({
    'forms-ext': {
      widgets: {
        calculateWidth: false
      }
    }
  });
  webshim.polyfill('forms forms-ext');
</script>

<form>
  <div class="input-date">
    <input type="date" value="2015-02-24">
  </div>
</form>

有人遇到过这个问题吗？

Answer 1

我有机会和webshim的作者讨论这个问题，发现有一个选项可以避免这种问题：noSpinbtn.

因此，代码将如下所示：

$('.input-date input').on('mousewheel', function (event) {
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webshim/1.15.6/dev/polyfiller.js"></script>

<script type="text/javascript">
  webshims.cfg.no$Switch = true;
  webshim.setOptions({
    'forms-ext': {
      widgets: {
        calculateWidth: false
      },
      date: {
        noSpinbtn: true
      }
    }
  });
  webshim.polyfill('forms forms-ext');
</script>

<form>
  <div class="input-date">
    <input type="date" value="2015-02-24">
  </div>
</form>

如何在 HTML5 日期输入上禁用具有 webshim 回退的滚动

How to disable scroll on HTML5 date inputs having a webshim fallback in

html

javascript

firefox

html-input

webshim