页面滚动窗口相关

如果滚动没有过渡效果请增加以下样式

html,body{
    scroll-behavior:smooth;
}

滚动dom节点的所在位置

      /* 获取当前dom节点到窗口的位置 */
      console.log(
        document.querySelector("#searchScroll").getBoundingClientRect().top
      );
      /* 跳转到此dom节点  这个默认滚动到顶部 不可以设置间距*/
      document.querySelector('#searchScroll').scrollIntoView({
        behavior: 'smooth',
            block: 'center',
       })

      /* 跳转到此dom节点  这个可以设置距离顶部的值 上面的也有behavior平滑滚动的参数*/
      window.scrollTo({
        top: this.$refs["item50"][0].getBoundingClientRect().top - 30,
        behavior: "smooth",
      });

缓慢滚动置顶

  var ding = document.getElementById('ding');
  ding.addEventListener('click', function () {
    var timer = setInterval(function () {
      var left = window.pageYOffset;
      var step = Math.ceil((left - 0) / 10);
      window.scroll(0, left - step);
      if (left == 0) {
        clearInterval(timer);
      }
    }, 30)
  })

获取当前页面的滚动位置

const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

// 事例
getScrollPosition(); // {x: 0, y: 200}

如何平滑滚动到页面顶部

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
}

// 事例
scrollToTop()

检查指定的元素在视口中是否可见

const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
  const { top, left, bottom, right } = el.getBoundingClientRect();
  const { innerHeight, innerWidth } = window;
  return partiallyVisible
    ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
        ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
    : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
};

// 事例
elementIsVisibleInViewport(el); // 需要左右可见
elementIsVisibleInViewport(el, true); // 需要全屏(上下左右)可以见

 获取自适应的高度

getAutoheight(dom, bottomMargin) {
      let screenHeight = window.innerHeight || document.body.clientHeight
      let _dom = document.querySelector(dom)
      if (!_dom) return '250'
      let { top } = _dom && _dom.getBoundingClientRect()
      // 这样算出来得高度就是整个屏幕 减掉top的长度 但最后为了不贴底部 就会减掉自定义的长度 也就是bottomMargin 这样可达到自适应长度
      return screenHeight - Math.ceil(top) - bottomMargin
    }

getAutoheight('.getBoundingClientRect', 70)