最近做 React 前端,有需求是软键盘弹起时,页面需要向上滚动,以避免软键盘挡住输入框。
最开始感觉很easy, 上来就是原生 scrollIntoView(),但是发现其兼容性超级差,比如IE, Edge 这一微软派上不能平滑滚动,还有安卓,iOS 等浏览器上也支持得不是很友好。
于是本着 内事不决问百度,外事不决问谷歌 的基本素养,历经千百度的寻觅之后,于灯火阑珊处终遇佳人:
安装命令:
yarn add smooth-scroll-into-view-if-needed
基本使用方式示范:
import React, {useEffect, useState} from 'react'
import scrollIntoView from 'smooth-scroll-into-view-if-needed'
export default function Index() {
const handleKeyboardShow = () => {
let detailDom = document.querySelector('.detail-container')
scrollIntoView(detailDom, {
scrollMode:'if-needed',
block:'end',
inline:'nearest'
})
}
return <div className={'detail-container'}>
<div onClick={handleKeyboardShow}>显示键盘</div>
</div>
}