材料设计工具栏是在前端网站设计中广泛使用的一种组件，它提供了一种集中管理页面功能的方法。然而，在 iOS 上，材料设计工具栏可能会面临一个问题，即工具栏上的内容不会溢出。这篇文章将介绍如何解决这个问题，并提供相关代码示例。
问题描述
在 iOS 上，材料设计工具栏上的内容通常很难溢出。这意味着，如果工具栏上有太多的元素，它们就会被截断或遮挡，而用户无法访问它们。这个问题影响了工具栏的可用性，并使得用户无法充分利用页面上的功能。
解决方案
解决这个问题的方法是使用 CSS 属性 -webkit-overflow-scrolling: touch，它可以启用 iOS 上的原生滚动效果。这个属性能够使得工具栏内容可以滚动，并且内容不会被截断或遮挡。
下面是一个示例代码，在一个简单的工具栏上演示了如何使用这个属性：
-- -------------------- ---- -------
--------- -----
------
------
-------
-------- -
------ -----
------- -----
----------------- -----
--------- ------
------- --
----- --
-------- --
--------------------------- ------
----------- -----
------------ -------
-
-------- ----- -
-------- -------------
------ -----
------- -----
----------- -------
--------------- -------
------------ -----
---------- -----
------ -----
-
--------
-------
------
---- ----------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
------
-------
-------在这个示例中，我们创建了一个样式类名为 .toolbar 的 div 元素，将其固定在底部，宽度为 100%。我们设置了工具栏每个元素的宽度为 56 像素，并使其在同一行内显示（使用 white-space: nowrap 属性）。接着，我们使用 -webkit-overflow-scrolling: touch 属性来启用 iOS 上的原生滚动效果，并设置 overflow-x: auto 使得内容可以水平滚动。这样，当我们在 iOS 设备上查看这个页面时，工具栏的元素就可以进行滚动了。
学习和指导意义
许多前端框架和库都包含了一些组件，而材料设计工具栏是其中一个非常有用的组件。然而，在 iOS 设备上，它可能会遇到上述问题。通过本文的解决方案，我们可以解决这个问题，使得页面的可用性得到提升，并且用户可以更轻松地访问工具栏上的内容。
在实际的前端开发中，我们应该尽可能地考虑不同用户的不同设备和操作系统。不同设备和操作系统可能会有不同的行为和限制，我们需要对这些进行充分的测试和优化，以确保用户能够获得最好的体验。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6792bc25504e4ea9bd683b1f