html - 2 列彼此独立滚动

标签 html css

我正在尝试使用 Flexbox 创建两列，它们应该可以彼此独立地滚动。第一列也应该固定。我的大问题是，当我的鼠标指针位于导航部分内并且我上下滚动时，有时会滚动其他内容 div 而不是导航。 (重现问题非常简单。只需将导航滚动到末尾，然后进一步滚动。然后内容侧将向下滚动。) 你们中有人以前做过类似的事情并且知道问题所在吗？

<!DOCTYPE html>
<html>
    <head>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            
            .app{
                display: flex;
                position: relative;
            }

            nav{
                
                width: 260px;
                height: 100%;
                position: relative;
            }

            .nav-content{
                width: 260px;
                overflow: scroll;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                background-color: coral;
            }

            .other-content{
                background-color: skyblue;
                flex-grow: 1;
            }
        </style>
    </head>
    <body>
        <div class="app">
            <nav>
                <div class="nav-content">
                    <ul>
                        <li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li>
                        <li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li>
                    </ul>
                </div>
            </nav>
            <div class="other-content">
                <div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div>
                <div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div>
                <div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div>
            </div>
        </div>
    </body>
</html>

最佳答案

如果你不关心browser support :

您可以使用overscroll-behavior属性:

<!DOCTYPE html>
<html>
    <head>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            
            .app{
                display: flex;
                position: relative;
                flex-direction: row;
            }

            nav{
                
                width: 260px;
                height: 100%;
                position: relative;
            }

            .nav-content{
                width: 260px;
                overflow: scroll;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                background-color: coral;
                overscroll-behavior: contain;
            }

            .other-content{
                background-color: skyblue;
                flex-grow: 1;
            }
        </style>
    </head>
    <body>
        <div class="app">
            <nav>
                <div class="nav-content">
                    <ul>
                        <li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li>
                        <li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li>
                    </ul>
                </div>
            </nav>
            <div class="other-content">
                <div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div>
                <div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div>
                <div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div><div>Some Content..</div>
            </div>
        </div>
    </body>
</html>

Javascript 解决方案:

Prevent scrolling of parent element when inner element scroll position reaches top/bottom? [duplicate]

关于html - 2 列彼此独立滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68817245/

上一篇：css - 如何更改 vaadin 8 组合框下拉项的背景颜色？

下一篇：java - 如何以编程方式定义数据源？

相关文章：

html - nodeJS - 修改 HTML 文件以显示图像

jquery - 有序数字加粗，不添加更多标签

html - 自定义单选按钮

javascript - 在D3气泡布局中，有没有办法通过jQuery监听气泡的名称并添加交互？

javascript - jQuery - 结合 Glitch Effect 和 Write Effect 是有问题的

css - 如何按类分隔样式表？

css - 继承一个 :visited link with color of the link

jquery - 用于旧浏览器的 jquery 中的第 nth-child(4n)

javascript - 可以在ajax调用中传递html元素

html - Dropdown Bootstrap 4 在 angular 应用程序的生产中不起作用

©2024 IT工具网  联系我们