嘿開發者！我在開發我的筆記應用程式時發現了這一點。
這是使用我的應用程式的帖子。
在 X (Twitter) 分享進展
您是否曾因 CSS 沒有以您預期的方式工作而感到驚訝？
當我將一個元素設定為固定在底部，然後打開 iPhone 上的鍵盤時，這種情況再次發生在我身上。
<div className="fixed bottom-0" />
我所看到的是該元素根本不可見。
因為它是固定的。到底部。鍵盤後面。
似乎要修復這個問題，我們需要一些 JS。
有一個具有良好支援的瀏覽器 API 可用於這些目的：VisualViewport。
它傳回實際可見視口的寬度和高度。 MDN 文件連結。
但是，請自行調查，看看您的目標版本是否支援它。
基本上，我們需要處理元素相對於視覺視窗的位置，以及滾動位置和元素的高度。讓我們算一下。
此外，由於這種方式的數學要簡單得多，因此使用頂部參數而不是底部參數是有意義的。
top = viewport height + scroll - element height
我將使用 React。對於任何其他框架，您只需複製 useEffect hook 的內容即可。
import { useEffect, useState } from 'react';
import classNames from 'classnames';
import { useDebounce } from 'use-debounce';
const elementHeight = 55; // elem. height in pixels
// It's also a good idea to calculate it dynamically via ref
export const FixedBlock = () => {
// top postion -> the most important math result goes here
const [top, setTop] = useState(0);
useEffect(() => {
function resizeHandler() {
// viewport height
const viewportHeight = window.visualViewport?.height ?? 0;
// math
setTop(viewportHeight + window.scrollY - elementHeight)
}
// run first time to initialize
resizeHandler();
// subscribe to events which affect scroll, or viewport position
window.visualViewport?.addEventListener('resize', resizeHandler);
window.visualViewport?.addEventListener('scroll', resizeHandler);
window?.addEventListener('touchmove', resizeHandler);
// unsubscribe
return () => {
window.visualViewport?.removeEventListener('resize', resizeHandler);
window.visualViewport?.removeEventListener('scroll', resizeHandler);
window?.removeEventListener('touchmove', resizeHandler);
};
}, [debouncedScroll]);
return (
<>
<div
className={classNames(
'absolute left-0 top-0', // <-- attention, it's absolute
top === 0 && 'hidden' // while calculating, we don't need to show it
)}
style={{ transform: `translateY(${debouncedTop}px)` }}
>
I am fixed
</div>
</>
);
};
我還需要添加一些動畫並隱藏滾動上的區塊，但您不必這樣做，它始終可見。
以上是即使鍵盤打開，如何將元素固定在底部的詳細內容。更多資訊請關注PHP中文網其他相關文章！
