时间戳

首页 > 解决方案 > jQuery scrollTop 偏移量不滚动到移动设备上的目标元素

javascript - jQuery scrollTop 偏移量不滚动到移动设备上的目标元素

问题描述

我一直在尝试为表单编写 jQuery 代码，以便当用户选择一个单选按钮时，页面会自动滚动到由一类包裹的下一个问题frm_opt_container

这是我页面的 HTML 结构：

<div class="frm_opt_container">
  <div class="frm_radio">
    <label>
      <input type="radio">
    </label>
  </div>

  <div class="frm_radio">
  <label>
    <input type="radio">
  </label>
  </div>

  <div class="frm_radio">
    <label>
      <input type="radio">
    </label>
  </div>
</div>

这是我写的 jQuery：

//Scroll Function
var option = document.querySelectorAll('label');
for (var i = 0;; i++) {
  option[i].addEventListener('click', function() {
    var ele = $(this).parents('.frm_opt_container');

    setTimeout(function() {
      $("html, body").animate({
        scrollTop: $(ele).offset().top
      }, 1000);
    }, 200);
  });
}

问题：代码在桌面上运行良好，但是当一个问题有两个很多选项时，它在移动设备上滚动一点（我在移动设备上将它们显示为块）。

这是指向仅包含表单的页面的参考链接。您可以使用带有单选按钮的第一个问题在移动设备上进行测试。

谢谢！

标签： javascripthtmljquerycss

解决方案

$(".frm_radio input").on('change', function() {

        var selector = $(this).closest('div').next();
        $('html, body').animate({
            scrollTop: $(selector).offset().top
        }, 2000);
    });

试试这个 jQuery 代码

推荐阅读