使用fullpage.js时，如何避免移动端输入框获焦全屏？

你已经考虑了允许滚动并预留空间的思路，这里再提供几个实用的替代方案：

• 动态修改fullpage容器高度
  监听窗口resize事件（键盘弹出/收起会触发这个事件），当检测到键盘弹出时，临时关闭fullpage的自动滚动，并把容器高度设为当前窗口可视高度，确保输入框所在滑块能完整显示。输入框失焦后恢复原配置：

  let originalHeight = '100vh';
  window.addEventListener('resize', () => {
    const currentHeight = window.innerHeight;
    // 根据设备实际情况调整阈值，判断键盘是否弹出
    const isKeyboardOpen = currentHeight < window.screen.height * 0.7;
    const fullpageEl = document.getElementById('fullpage');
    
    if (isKeyboardOpen) {
      fullpage_api.setAutoScrolling(false);
      originalHeight = fullpageEl.style.height || '100vh';
      fullpageEl.style.height = `${currentHeight}px`;
    } else {
      fullpage_api.setAutoScrolling(true);
      fullpageEl.style.height = originalHeight;
    }
  });
  

• 临时调整输入框位置到安全区
  给输入框绑定focus事件，触发时将输入框所在的滑块滚动到页面顶部，同时禁用fullpage的固定定位特性；绑定blur事件，在输入框失去焦点后恢复原布局。这种方式能让输入框始终处于键盘上方的可视区域。

• 移动端单独禁用fullpage全屏滚动
  如果问题仅出现在移动端，可针对移动设备初始化fullpage时关闭自动滚动，改用原生滚动，从根源避免全屏固定布局和系统键盘的冲突：

  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  
  new fullpage('#fullpage', {
    autoScrolling: !isMobile,
    scrollOverflow: isMobile,
    // 其他配置项
  });
  

• 给输入框区域动态添加底部留白
  利用fullpage的afterLoad回调，在滑块加载完成后，给输入框所在容器添加动态底部内边距。输入框聚焦时增大留白，失焦时恢复：

  .input-container {
    transition: padding-bottom 0.3s;
  }
  .input-container.keyboard-open {
    padding-bottom: 220px; /* 适配大部分手机键盘高度 */
  }
  

  const inputContainer = document.querySelector('.input-container');
  const inputEl = inputContainer.querySelector('input');
  
  inputEl.addEventListener('focus', () => inputContainer.classList.add('keyboard-open'));
  inputEl.addEventListener('blur', () => inputContainer.classList.remove('keyboard-open'));
  

内容的提问来源于stack exchange，提问作者keit265