Question

我已经构建了一个自定义的可搜索下拉列表，在移动设备上，我将其移至距离屏幕最顶部约 200 像素的父级顶部（由于某些标题元素），以避免下拉列表与键盘重叠像这样

.custom-dropdown.isSearching{
  position:absolute;
  top:0;
  left:50%;
  width:100%;
  max-height:200px;
  transform:translateX(-50%);
  overflow-y:auto;
}

  
   const [isSearching,setIsSearching] = useState(false);

   <div className={["custom-dropdown",isSearching?"isSearching":undefined].join(" ")}>
    <input onFocus={()=>{
     setIsSearching(true)
      ...
     }}/>
    <ul className="dropdown-items">...</ul>
   </div>

在焦点输入中，我更改了 isSearching 状态

和

    useEffect(()=>{
   if(isSearching)document.querySelector(".isSearching").scrollIntoView({ behavior: "auto", block: "end", inline: "nearest" });
},[isSearching])

问题是，当您在移动设备上专注于输入时，键盘会出现并且滚动条没有到达下拉列表的顶部，但就像它的一半一样，我该怎么做才能解决这个问题？

element.scrollIntoView() 在移动设备上的表现不如预期

0 个答案: