时间戳

首页 > 解决方案 > 当鼠标位于页面上的任何位置时，是否有 CSS 方法来滚动 div？

css - 当鼠标位于页面上的任何位置时，是否有 CSS 方法来滚动 div？

问题描述

围绕这个主题有一些问题，但大多数都是几年前的问题。

我只是想知道是否有一种方法来布局您的页面，这样无论鼠标滚轮在哪里，滚轮都会滚动特定的 div。

例如，在stackoverflow上，如果您向下滚动主页，您将看到左侧菜单保持固定，并且您可以在鼠标悬停在菜单上时滚动它，即使鼠标悬停在标题栏上也是如此。但是它可能正在使用javascript，我不知道。

在深入研究 javascript 解决方案之前，我想知道 CSS 是否已启用此功能，可能是使用默认 div 或其他一些 CSS 技术。

这是我的布局的一个小提琴：https ://jsfiddle.net/thjyf5c3/

<body style="display: flex; flex-direction: column; height:100vh; overflow-y: hidden">
    HEADER FOR THE PAGE

<div style="flex-flow: column; display:flex;flex:1">
        <div style="flex: 1; display:flex;">
            <div style="background-color: red; max-width: 200px; min-width: 100px; flex-basis: 20%">test</div>
            <div style="background-color: purple;flex: 1; display: flex">

                <div style="flex-grow:1; position: relative; overflow:hidden; ">
                    <div style="position:absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: scroll">
                        <div style="flex: 1; display:flex;">
                            <span style="font-size:500px">a<br />b<br />c<br /> </span>
                        </div>
                    </div>
                </div>


            </div>
            <div style="background-color: blue;flex: 1">test</div>
        </div>
    </div>

如您所见，如果鼠标不在网格边界内，它不会滚动。

标签： cssscrollbar

解决方案

推荐阅读