jQuery ScrollTop 在 iOS 上不起作用

Posted 2023-02-23

【中文标题】jQuery ScrollTop 在 iOS 上不起作用

【英文标题】：jQuery ScrollTop not working on iOS

【发布时间】：2018-07-23 15:36:09

【问题描述】：

我有一个可在页面内滚动的 div。单击按钮时，可滚动的 div 应将自身滚动到底部的表单（而不是滚动正文）。我的解决方案在桌面上运行良好，但在 ios 上根本无法运行。

如果有人知道此问题的解决方法，我将不胜感激。我在缩小的 jQuery 3.3.1 上运行它。

    $('.reveal .detail-contact .button').click(function()
      $('.reveal').scrollTop($('form').offset().top);
    )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="reveal">
      <div class="reveal-container">

        <div class="detail-heading">
          <h3 class="detail-title"></h3>
          <div class="detail-social">
            <img src="/img/facebook-f.png" />
            <img src="/img/instagram-glyph.png" />
            <img src="/img/twitter-logo.png" />
          </div>
        </div>
        <p class="body-subheading">£$p>
        <p class="detail-description">
          
        </p>
        <div class="detail-contact ">
          <a class="contact-number contact-call" href="tel:[phone]">
            <img src="/img/phone-icon.svg" />
            +44
          </a>
          <a class="button">
            CONTACT US
          </a>
        </div>
        <hr />
        <span class="minor-heading">KEY DETAILS</span>
        <div class="infographics columns is-tablet">
          <div class="column">
            <div class="infographic">
              <p class="minor-text">POWER</p>
              <p class="major-text"></p>
              <p class="minor-text">HP</p>
            </div>
          </div>
          <div class="column">
            <div class="infographic">
              <p class="minor-text">TORQUE</p>
              <p class="major-text"></p>
              <p class="minor-text">LB-FT</p>
            </div>
          </div>
          <div class="column">
            <div class="infographic">
              <p class="minor-text">0-62</p>
              <p class="major-text"></p>
              <p class="minor-text">SECONDS</p>
            </div>
          </div>
          <div class="column">
            <div class="infographic">
              <p class="minor-text">TOP SPEED</p>
              <p class="major-text"></p>
              <p class="minor-text">MPH</p>
            </div>
          </div>
        </div>
        <hr />
        <span class="minor-heading">VEHICLE SUMMARY</span>
        <div class="tech-specs">
          <div class="tech-spec">
            <span class="minor-text">Registration Year</span>
            <span class="minor-text"></span>
          </div>
          <hr />
          <div class="tech-spec">
            <span class="minor-text">Body Colour</span>
            <span class="minor-text"></span>
          </div>
          <hr />
          <div class="tech-spec">
            <span class="minor-text">Fuel Type</span>
            <span class="minor-text"></span>
          </div>
          <hr />
          <div class="tech-spec">
            <span class="minor-text">Engine Size</span>
            <span class="minor-text">L</span>
          </div>
          <hr />
          <div class="tech-spec">
            <span class="minor-text">Gearbox</span>
            <span class="minor-text"></span>
          </div>
          <hr />
          <div class="tech-spec">
            <span class="minor-text">Body Style</span>
            <span class="minor-text"></span>
          </div>
          <hr />
          <div class="tech-spec">
            <span class="minor-text">Doors</span>
            <span class="minor-text"> Door</span>
          </div>
          <hr />
        </div>
        <span class="minor-heading">TECHNICAL SPECS</span>
        <div class="tech-specs">
          <div class="tech-spec">
            <span class="minor-text">Horsepower</span>
            <span class="minor-text"> BHP</span>
          </div>
          <hr />
          <div class="tech-spec">
            <span class="minor-text">0-62 mph</span>
            <span class="minor-text"></span>
          </div>
          <hr />
          <div class="tech-spec">
            <span class="minor-text">Drivetrain</span>
            <span class="minor-text"></span>
          </div>
          <hr />
          <div class="tech-spec">
            <span class="minor-text">Top Speed</span>
            <span class="minor-text"> mph</span>
          </div>
          <hr />
          <div class="tech-spec">
            <span class="minor-text">Combined MPG</span>
            <span class="minor-text"> mpg</span>
          </div>
        </div>
      </div>
      <div class="contact-form" id="contact-form">
        <div class="reveal-container">
          <div class="detail-contact">
            <a class="contact-number contact-call" href="tel:[phone]">
              <img src="/img/phone-icon.svg" />
              [phone]
            </a>
          </div>
          <h4>CAN WE HELP YOU?</h4>
          <p class="minor-text">
            If you have any questions about how we can help with this vehicle,
            please contact us via the form below.
          </p>
          <form method="post" id="enquiryForm">
            <div class="form-body">
              <label>
                <input type="text" id="firstName" required/>
                <div class="label-text">
                  First Name
                </div>
              </label>
              <label>
                <input type="text" id="lastName" required/>
                <div class="label-text">
                  Last Name
                </div>
              </label>
              <label>
                <input type="number" id="telNumber" required/>
                <div class="label-text">
                  Telephone Number
                </div>
              </label>
              <label>
                <input type="text" id="emailAddress" required/>
                <div class="label-text">
                  Email Address
                </div>
              </label>
              <label class="textarea-input">
                <textarea type="text" id="enquiryDetails" required>Enquiry regarding</textarea>
                <div class="label-text">
                  How can we help?
                </div>
              </label>
            </div>
            <div class="field is-grouped-centered consent">
              <div class="control">
                <label class="checkbox minor-text">
                  <input type="checkbox" class="consentCheck" required>
                </label>
              </div>
            </div>
            <button type="submit">Send Enquiry</button>
          </form>
        </div>
      </div>
    </div>
  </section>

【参考方案1】：

试着在脚本的开头只放一个类

''' $(“.oneclass”) '''

【讨论】：

不幸的是，这没有任何区别。 jQuery 能够处理像 CSS 这样的多个选择器。