英文:
React + CSS: Scrollable section inside another scrollable section getting me issues to get the footer in Mobile
问题
希望你能帮助我。
问题是，我有一个部分，在这个部分里我映射组件。这个部分有垂直滚动。在这个部分之外，还有其他组件，比如地图、导航栏、页脚等等。
当我处于移动模式时，我可以滚动浏览所有映射的组件，但当我滚动到该部分的末尾时，我无法到达页脚或分页组件。
要测试这个问题，你可以进入这个网站，然后尝试在移动模式下滚动浏览并到达分页组件。
如果我没有解释清楚，我很抱歉，这是一个令人困扰的问题，我不知道如何解决它。
英文:
Hope you can help me out here.
The thing is that I have a section, where I map components. This section has a vertical scroll. Outside this section, there's another components, like a map , navbar, footer, etc.
When I'm in mobile, I can scroll through all the components mapped, but when I got to the end of the section, I can't get to the footer or the pagination component.
To test this issue, you can enter this site and
try to scroll down all over and get to the pagination component in a mobile.
Sorry if I didn't explained it well, It's an annoying issue and I don't know how to solve it.
答案1
得分: 1
这是由于此处的内联样式引起的：
<div class="col-lg-7 col-sm-12" style="height: 860px; overflow-y: scroll;">
尝试移除内联样式并添加一个类，然后可以在媒体查询中为桌面样式应用所需的样式，可以这样做（您可以将类命名为更合适的名称）：
<div class="col-lg-7 col-sm-12 scroll-fix">
CSS部分：
/* 用于桌面的重置 */
@media only screen and (min-width: 992px) {
.scroll-fix {
height: 860px;
overflow-y: scroll;
}
}
英文:
This is caused by the inline style here:
<div class="col-lg-7 col-sm-12" style="height: 860px; overflow-y: scroll;">
Try removing the inline style and adding a class that you can apply the required styling to in a media query to target desktop.
So it could look something like (you can name the class to something more appropriate)
<div class="col-lg-7 col-sm-12 scroll-fix">
css
/* Reset for desktop */
@media only screen and (min-width: 992px) {
.scroll-fix {
height: 860px;
overflow-y: scroll;
}
}
答案2
得分: 0
我在这里使用我的个人电脑和手机进行了测试，效果很好。无论如何，如果问题仍然存在，请尝试在组件之间创建更大的间距，使用上/下边距进行测试，并尝试使用不同型号的手机来查看其显示效果。
Responsively App可以帮助您。
英文:
I tested here using my PC and my cellphone and worked well. Anyway, if the problem persists, try to create a bigger space between components with margin top/down and test again and check using different models of cellphone to see how it will look.
Responsively App can help you.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论