对dom元素的一些操作

该写代码了

已于 2023-03-01 13:10:30 修改

阅读量77

点赞数

分类专栏：前端通用文章标签： javascript Powered by 金山文档

于 2023-02-21 16:59:24 首次发布

本文链接：https://blog.csdn.net/qq_37411242/article/details/129145957

版权

前端通用专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章提供了一段JavaScript代码，用于实现元素的懒加载功能，根据DOMMouseScroll和onmousewheel事件判断元素是否在视口内。另外，还展示了如何在火狐和其它浏览器中设置元素的自动隐藏滚动条，并在用户滚动时平滑滚动。代码中包含事件监听的添加与销毁，以及滚动条宽度处理。

摘要由CSDN通过智能技术生成

自造轮子，不是特别好用，需要根据需求改一些代码

设置懒加载元素

export function setLazyLoad(element, callback) {
  let timer;
  // 火狐浏览器
  document.addEventListener('DOMMouseScroll', () => {
    if (!isInViewPort(element) || timer) {
      return;
    }
    timer = setTimeout(() => {
      clearTimeout(timer);
      timer = null;
    }, 3000);
    callback();
  })
  // 其余浏览器
  window.onmousewheel = function() {
    if (!isInViewPort(element) || timer) {
      return;
    }
    timer = setTimeout(() => {
      clearTimeout(timer);
      timer = null;
    }, 3000);
    callback();
  }
}

// 元素是否在可视区域
function isInViewPort(element) {
  const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 
  const offsetTop = element.offsetTop
  const scrollTop = document.documentElement.scrollTop
  const top = offsetTop - scrollTop
  return top <= viewPortHeight + 100
}

在组件里使用示范：

setLazyLoad(document.getElementById('lazy-load'), myLazyLoadFunction);

const myLazyLoadFunction = () => {
    blablabla
}

销毁监听事件：

onUnmounted(() => {
  document.removeEventListener('DOMMouseScroll', () => {});
  window.onmousewheel = null;
})

将一个元素设置成自动隐藏滚动条的样式

// 将一个元素设置成自动隐藏滚动条的样式
export function setDynamicHiddenScrollBar({ element, timeout, paddingRight }) {
  element.style.overflowY = 'hidden';
  let timeoutId;
  // 火狐浏览器
  document.addEventListener('DOMMouseScroll', (e) => {
    element.style.overflowY = 'scroll';
    element.style.paddingRight = `${paddingRight - 8}px`;
    element.scrollTo({
      top: element.scrollTop + e.detail * 100,
      behavior: 'smooth'
    });
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      element.style.overflowY = 'hidden';
      element.style.paddingRight = `${paddingRight}px`;
    }, timeout);
  })
  // 其余浏览器
  element.onmousewheel = function (e) {
    element.style.overflowY = 'scroll';
    element.style.paddingRight = `${paddingRight - 4}px`;
    element.scrollTo({
      top: element.scrollTop - (e.wheelDeltaY / 180) * 275,
    });
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      element.style.overflowY = 'hidden';
      element.style.paddingRight = `${paddingRight}px`;
    }, timeout);
  }
}