当前位置：首页 > JavaScript

js实现双屏

2026-02-01 07:23:49JavaScript

使用CSS和JavaScript实现双屏布局

双屏布局通常指在同一页面中并排显示两个独立的内容区域，可以通过CSS和JavaScript实现。以下是几种常见的实现方式：

CSS Flexbox布局

.container {
  display: flex;
  height: 100vh;
}
.screen {
  flex: 1;
  overflow: auto;
  border: 1px solid #ccc;
}

CSS Grid布局

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

动态调整双屏比例

通过JavaScript可以动态调整两个屏幕的宽度比例：

const leftScreen = document.querySelector('.left-screen');
const rightScreen = document.querySelector('.right-screen');
const divider = document.querySelector('.divider');

let isDragging = false;

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

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

  const containerWidth = document.querySelector('.container').offsetWidth;
  const newLeftWidth = e.clientX;
  const newRightWidth = containerWidth - e.clientX;

  leftScreen.style.width = `${newLeftWidth}px`;
  rightScreen.style.width = `${newRightWidth}px`;
});

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

同步滚动功能

如果需要实现两个屏幕内容同步滚动：

const screens = document.querySelectorAll('.screen');

screens.forEach(screen => {
  screen.addEventListener('scroll', (e) => {
    const scrollTop = e.target.scrollTop;
    const scrollLeft = e.target.scrollLeft;

    screens.forEach(otherScreen => {
      if (otherScreen !== e.target) {
        otherScreen.scrollTo(scrollLeft, scrollTop);
      }
    });
  });
});

响应式处理

为适应不同设备，可以添加媒体查询：

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
  .screen {
    height: 50vh;
  }
}

实际应用示例

完整HTML结构示例：

js实现双屏

<!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; }
    .container {
      display: flex;
      height: 100vh;
    }
    .screen {
      flex: 1;
      overflow: auto;
      padding: 20px;
    }
    .divider {
      width: 5px;
      background: #ddd;
      cursor: col-resize;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="screen left-screen">左侧内容区域</div>
    <div class="divider"></div>
    <div class="screen right-screen">右侧内容区域</div>
  </div>
  <script>
    // 添加上述JavaScript代码
  </script>
</body>
</html>

以上方法可以根据具体需求进行组合和调整，实现不同风格和功能的双屏布局。