getBoundingClientRect（）不用于safari

Question

我已经将getBoundingClientRect（）用于菜单，而不是在使用safari。它在iphone的移动浏览器，chrome和firefox上运行良好，但在Safari浏览器上它无法正常工作。

<div class="menuDiv" id="menuDivId">
    <div class="menu" id="menuId">
        <ul>
          <li>
            <div class="borderBo">
              <a class="active" id="booking" href="#book">Booking</a
            </div>
          </li>
        </ul>
     </div>
</div>


<div>

.
.
.
  lots of text
.
.
.
.

</div>


<div class="bookings" id="bookingScroll">
</div>

<div>

  .
  .
  .
    lots of text
  .
  .
  .
  .

</div>

JS：

var bookingScroll = document.getElementById("bookingScroll");
document.getElementById('booking').addEventListener('click', function(){
  window.scrollTo({
    top: bookingScroll.getBoundingClientRect().top,
    behavior: "smooth"
  });
})

编辑：我在jquery中提出了一个适用于safari的解决方案。

Answer 1

也许有更好的答案。这是我案例的解决方案：

https://github.com/flesler/jquery.scrollTo

if(navigator.userAgent.indexOf("Safari") != -1)
  {
    $('#booking').on('click', function(event) {
        $(window).scrollTo($("#bookingScroll"));
    });
  }