js实现分屏

2026-03-14 17:10:50JavaScript

分屏实现方法

使用CSS Grid布局

通过CSS Grid可以轻松实现分屏效果，结合JavaScript动态调整布局。

<div class="split-container">
  <div class="split-pane left-pane">左侧内容</div>
  <div class="split-pane right-pane">右侧内容</div>
</div>

.split-container {
  display: grid;
  grid-template-columns: 50% 50%;
  height: 100vh;
}

.split-pane {
  overflow: auto;
}

// 动态调整分屏比例
const container = document.querySelector('.split-container');
let isDragging = false;

container.addEventListener('mousedown', (e) => {
  isDragging = true;
  document.body.style.cursor = 'col-resize';
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const containerRect = container.getBoundingClientRect();
  const percent = (e.clientX - containerRect.left) / containerRect.width * 100;
  container.style.gridTemplateColumns = `${percent}% ${100 - percent}%`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
  document.body.style.cursor = '';
});

使用Flexbox布局

Flexbox布局也是实现分屏的常用方法，适合响应式设计。

js实现分屏

<div class="split-flex">
  <div class="split-item" id="left">左侧面板</div>
  <div class="split-divider"></div>
  <div class="split-item" id="right">右侧面板</div>
</div>

.split-flex {
  display: flex;
  height: 100vh;
}

.split-item {
  flex: 1;
  overflow: auto;
}

.split-divider {
  width: 5px;
  background: #ddd;
  cursor: col-resize;
}

const divider = document.querySelector('.split-divider');
const leftPanel = document.getElementById('left');
const rightPanel = document.getElementById('right');

divider.addEventListener('mousedown', () => {
  document.addEventListener('mousemove', resize);
  document.addEventListener('mouseup', stopResize);
});

function resize(e) {
  const containerWidth = divider.parentNode.getBoundingClientRect().width;
  const leftWidth = e.clientX / containerWidth * 100;
  leftPanel.style.flex = leftWidth;
  rightPanel.style.flex = 100 - leftWidth;
}

function stopResize() {
  document.removeEventListener('mousemove', resize);
}

使用第三方库

Split.js是一个轻量级的分屏库，使用简单：

js实现分屏

<div id="split-container">
  <div>面板1</div>
  <div>面板2</div>
</div>

import Split from 'split.js';

Split(['#left-panel', '#right-panel'], {
  sizes: [30, 70],
  minSize: 100,
  gutterSize: 8,
});

垂直分屏实现

通过修改CSS和JavaScript可以实现垂直分屏：

.split-container-vertical {
  display: grid;
  grid-template-rows: 50% 50%;
  height: 100vh;
}

.split-divider-vertical {
  height: 5px;
  background: #ddd;
  cursor: row-resize;
}

const verticalDivider = document.querySelector('.split-divider-vertical');
verticalDivider.addEventListener('mousedown', () => {
  document.addEventListener('mousemove', verticalResize);
  document.addEventListener('mouseup', stopVerticalResize);
});

function verticalResize(e) {
  const containerHeight = divider.parentNode.getBoundingClientRect().height;
  const topHeight = e.clientY / containerHeight * 100;
  topPanel.style.flex = topHeight;
  bottomPanel.style.flex = 100 - topHeight;
}

多面板分屏

通过嵌套分屏容器可以实现复杂布局：

<div class="main-container">
  <div class="horizontal-split">
    <div>顶部面板</div>
    <div class="vertical-split">
      <div>左下面板</div>
      <div>右下面板</div>
    </div>
  </div>
</div>

.main-container {
  height: 100vh;
}

.horizontal-split {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.vertical-split {
  display: flex;
  flex: 1;
}

标签: js