JavaScript初级篇：offset、client、scroll系列及实战案例

前端

2023-10-13 04:36:13

offset，client，scroll系列属性简介

在JavaScript中，offset、client和scroll系列属性是用来获取元素位置和尺寸信息的重要工具。这些属性可以帮助我们轻松获取元素在页面中的位置、相对于父元素的位置、以及滚动条的位置等信息。

offset系列属性：offsetLeft、offsetTop、offsetWidth、offsetHeight
client系列属性：clientWidth、clientHeight
scroll系列属性：scrollLeft、scrollTop

offset系列属性

offset系列属性用于获取元素相对于页面文档的位置和尺寸信息。

offsetLeft：元素相对于页面文档的左边界位置。
offsetTop：元素相对于页面文档的上边界位置。
offsetWidth：元素的宽度，包括元素的内边距和边框。
offsetHeight：元素的高度，包括元素的内边距和边框。

client系列属性

client系列属性用于获取元素相对于其父元素的位置和尺寸信息。

clientWidth：元素的宽度，不包括元素的内边距、边框和滚动条。
clientHeight：元素的高度，不包括元素的内边距、边框和滚动条。

scroll系列属性

scroll系列属性用于获取元素的滚动条位置信息。

scrollLeft：元素的水平滚动条位置。
scrollTop：元素的垂直滚动条位置。

实战案例

获取鼠标在盒子内坐标

const box = document.getElementById('box');

box.addEventListener('mousemove', (event) => {
  const x = event.offsetX;
  const y = event.offsetY;

  console.log(`Mouse position: (${x}, ${y})`);
});

拖拽模态框

const modal = document.getElementById('modal');
const header = modal.querySelector('.modal-header');

header.addEventListener('mousedown', (event) => {
  const initialX = event.clientX;
  const initialY = event.clientY;

  const moveHandler = (event) => {
    const dx = event.clientX - initialX;
    const dy = event.clientY - initialY;

    modal.style.left = `${modal.offsetLeft + dx}px`;
    modal.style.top = `${modal.offsetTop + dy}px`;
  };

  const upHandler = () => {
    document.removeEventListener('mousemove', moveHandler);
    document.removeEventListener('mouseup', upHandler);
  };

  document.addEventListener('mousemove', moveHandler);
  document.addEventListener('mouseup', upHandler);
});

固定侧边栏

const sidebar = document.getElementById('sidebar');

window.addEventListener('scroll', () => {
  if (window.scrollY > 100) {
    sidebar.classList.add('fixed');
  } else {
    sidebar.classList.remove('fixed');
  }
});