垂直滚动与移动铬上的溢出自动

发布于 2025-02-11 07:43:49 字数 1142 浏览 1 评论 0原文

我正在尝试创建一个在另一个下方具有以下元素的移动侧栏：

徽标容器 - ＆gt;带有菜单项的UL列表 - ＆GT;带有社交图标的页脚。徽标容器和页脚将使用Zindex值在UL列表上方显示。

在桌面浏览器上，一切都可以正常工作，但是当我在移动镀铬/野生动物园上检查它时，在勇敢的浏览器上不起作用时，它会起作用。

徽标容器和页脚都应固定，并且在有许多元素时列表应允许滚动。我想我此时尝试了所有互联网。有人知道我该怎么办？以下是我的CSS。

  [`& .${classes.toolbar}`]: {
    position: 'fixed',
    top: 0,
    display: 'block',
    width: '224px',
    backgroundColor:
      theme.palette.mode === 'light' ? 'white' : '#1F4B76',
    zIndex: 100,
  },

  [`& .${classes.scrollableList}`]: {
    marginTop: '182px',
    marginBottom: '74px',
    height: '100%',
    height: '-webkit-calc(100% - 252px)',
    height: 'calc(100% - 252px)',
    maxHeight: '70vh',
    maxHeight: 'calc(100vh - 252px)',
    zIndex: 50,
    overflow: 'auto',
  },

  [`& .${classes.footer}`]: {
    position: 'fixed',
    bottom: 0,
    display: 'block',
    width: '224px',
    backgroundColor:
      theme.palette.mode === 'light' ? 'white' : '#1F4B76',
    zIndex: 100,
  },

移动铬的实际行为如下。 Chrome允许我滚动到某个时刻，之后我必须停止滚动，如果我尝试再次滚动，它将在父组件上添加额外的滚动，并将使用它到列表的尽头。当我尝试滚动时，同样的行为也会发生。测试它非常复杂，因为我必须始终为每次更改进行部署并检查它是否有效。任何想法都将不胜感激。

原文

I am trying to create a mobile sidebar that has the following elements one under the other:

logo container -> ul list with menu items -> footer with social icons.
The logo container and the footer will be displayed above the ul list using the zIndex values.

Everything works as it should on the desktop browser but when I check it on the mobile chrome/safari is not working, however, on the brave browser, it works.

Both the logo container and the footer should be fixed and the list should allow scroll when there are many elements. I think I tried all the internet at this moment. Does anyone have any clue what should I do? Below is my CSS for this component.

  [`& .${classes.toolbar}`]: {
    position: 'fixed',
    top: 0,
    display: 'block',
    width: '224px',
    backgroundColor:
      theme.palette.mode === 'light' ? 'white' : '#1F4B76',
    zIndex: 100,
  },

  [`& .${classes.scrollableList}`]: {
    marginTop: '182px',
    marginBottom: '74px',
    height: '100%',
    height: '-webkit-calc(100% - 252px)',
    height: 'calc(100% - 252px)',
    maxHeight: '70vh',
    maxHeight: 'calc(100vh - 252px)',
    zIndex: 50,
    overflow: 'auto',
  },

  [`& .${classes.footer}`]: {
    position: 'fixed',
    bottom: 0,
    display: 'block',
    width: '224px',
    backgroundColor:
      theme.palette.mode === 'light' ? 'white' : '#1F4B76',
    zIndex: 100,
  },

The actual behavior on the mobile chrome is as follows. Chrome allows me to scroll until some point after which I have to stop scrolling and if I try to scroll again it will render an extra scroll on the parent component and will use it to go to the end of the list. The same behavior happens when I try to scroll up. It's so complicated to test it out since I have to always deploy for each change and check if it works. Any idea would be much appreciated.

分享到QQ

分享到微博