当前位置：首页 > JavaScript

js实现分屏

2026-04-06 10:59:46JavaScript

使用 CSS Grid 实现分屏

通过 CSS Grid 布局可以轻松实现分屏效果。以下是一个简单的水平分屏示例：

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

.split-screen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
}

.left-pane, .right-pane {
  padding: 20px;
}

使用 Flexbox 实现分屏

Flexbox 是另一种实现分屏的常用方法：

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

.left-pane {
  flex: 1;
  background: #f0f0f0;
}

.right-pane {
  flex: 1;
  background: #e0e0e0;
}

可调整的分屏布局

使用 JavaScript 实现可拖拽调整的分屏：

js实现分屏

<div class="resizable-split">
  <div class="left-resizable">左侧</div>
  <div class="divider"></div>
  <div class="right-resizable">右侧</div>
</div>

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

.left-resizable {
  width: 50%;
  background: #f5f5f5;
}

.right-resizable {
  flex: 1;
  background: #e5e5e5;
}

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

const divider = document.querySelector('.divider');
const leftPane = document.querySelector('.left-resizable');
let isDragging = false;

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

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;

  const containerWidth = divider.parentNode.offsetWidth;
  const newLeftWidth = (e.clientX / containerWidth) * 100;

  leftPane.style.width = `${newLeftWidth}%`;
});

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

使用第三方库实现分屏

对于更复杂的需求，可以考虑使用专门的库如：

Split.js：

js实现分屏

Split(['#left', '#right'], {
sizes: [30, 70],
minSize: 200
});

Golden Layout：

const myLayout = new GoldenLayout({
content: [{
 type: 'row',
 content: [{
   type: 'component',
   componentName: 'leftComponent'
 }, {
   type: 'component',
   componentName: 'rightComponent'
 }]
}]
});

响应式分屏设计

添加媒体查询使分屏在移动设备上变为垂直布局：

@media (max-width: 768px) {
  .split-screen {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .resizable-split {
    flex-direction: column;
  }

  .divider {
    width: 100%;
    height: 10px;
    cursor: row-resize;
  }
}

这些方法提供了从简单到复杂的分屏实现方案，可以根据具体需求选择合适的实现方式。

标签: js