即使键盘打开，如何保持元素固定在底部

嘿开发者！我在开发我的笔记应用程序时发现了这一点。
这是使用我的应用程序的帖子。
在 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中文网其他相关文章！