设置溢出后，鼠标上的滚轮在 MS Edge 中不起作用：html 正文中的自动

Question

我的ASP.NET Core MVC项目中的页面有以下css样式表：

body {
background-repeat: no-repeat;
background: linear-gradient(30deg, rgba(121, 110, 255, 0.95) 0%, rgba(33, 200, 122, 0.95) 100%);
background: -webkit-linear-gradient(30deg, rgba(121, 110, 255, 0.95) 0%, rgba(33, 200, 122, 0.95) 100%);
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
resize: both;
overflow: auto;}

添加行overflow: auto;后，效果是，我无法使用MS Edge的鼠标滚轮垂直滚动页面。所有其他浏览器都可以正常工作。

这里有一个线索，但没有提供有效的建议或帮助。此线程已锁定。

有什么建议或变通办法吗？

Answer 1

在您的情况下，overflow: auto;仅用于固定背景，因为您将其应用于整个身体。(旁注：您可能希望使用overflow : scroll而不是auto(
但是修复背景的正确方法是使用background-attachment: fixed;:

body {
background-repeat: no-repeat;
background: linear-gradient(30deg, rgba(121, 110, 255, 0.95) 0%, rgba(33, 200, 122, 0.95) 100%);
background: -webkit-linear-gradient(30deg, rgba(121, 110, 255, 0.95) 0%, rgba(33, 200, 122, 0.95) 100%);
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
resize: both;
background-attachment: fixed;
}

我想"错误"是因为你的代码在页面内创建了一个可滚动的元素，这个元素已经是可滚动的了。也许在滚动到shure之前先点击你的页面。

Answer 2

我认为CSS中正在添加一些由浏览器自动处理的内容。例如：

body {
background-repeat: no-repeat;
background: linear-gradient(30deg, rgba(121, 110, 255, 0.95) 0%, rgba(33, 200, 122, 0.95) 100%);
background: -webkit-linear-gradient(30deg, rgba(121, 110, 255, 0.95) 0%, rgba(33, 200, 122, 0.95) 100%);
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
resize: both;
}

我不认为overflow: auto是必要的，这就是问题所在。在实体上，应该不需要添加overflow: auto，因为实体通常是自己添加的。

请告诉我这是否有用。谢谢