在 Vue 中，我们经常需要实现一个容器内部可以滚动的组件。但有时候，我们希望在这个组件中放置一些固定位置的元素，例如页眉、页脚或者一些悬浮的操作按钮等等，这些元素不应该跟随容器的滚动而移动。
在本文中，我们将介绍如何实现一个 Vue 组件，使得其子组件可以滚动而父组件不跟随滚动，并且支持 PC 和移动端。
实现思路
要实现这个功能，我们需要使用 CSS position 属性和 overflow 属性来控制子组件和父组件的布局。具体而言，我们可以：
- 将父组件设置为
position: relative; overflow: hidden;。这样子组件就能够根据内容的高度自由滚动了，但是父组件不会跟随滚动。 - 将子组件设置为
position: absolute; overflow: auto; top: 0; left: 0; right: 0; bottom: 0;。这样子组件就可以占据整个父组件的空间，并且可以自由滚动。
下面是示意图：
-- -------------------- ---- ------- ----------------------- - --- - - - - ------------------ - - - --- - - - - - - - - - - - - - - - - - - - - - - - ------------------ - - - -----------------------
实现代码
下面是一个实现的示例代码：
-- -------------------- ---- -------
----------
---- ---------------
---- -------------------------
---- ----------------
---- -------------------
-------------
------
------
---- -------------------------
------
-----------
--------
------ ------- -
----- ----------------------
--
---------
------ -------
------- -
--------- ---------
--------- -------
------- ------ -- ------ --
-
------- -
--------- -------
---- --
----------------- -----
-------- --
-
-------- -
------- -----
-
----------- -
--------- ---------
---- --
----- --
------ --
------- --
--------- -----
-
--------在这个示例代码中，我们使用了 position: sticky 将页眉固定在顶部，并且设置了 z-index，以避免子组件内容和页眉重叠。
总结
通过本文的介绍，你已经学会了如何实现一个 Vue 组件，使得子组件可以滚动而父组件不跟随滚动，并且支持 PC 和移动端。这种实现方法不仅简单易懂，而且具有广泛的适用性，可以帮助你更好地实现各种复杂的布局需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5804