首页 > 解决方案 > 设置溢出后鼠标滚轮在 MS 边缘不起作用:html 正文中的自动

问题描述

我的 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 鼠标上的滚轮垂直滚动页面。所有其他浏览器都可以正常工作。

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

有什么建议或解决方法吗?

标签: htmlcssasp.net-core-mvc

解决方案


在您的情况下,这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;
}

我猜“错误”是因为您的代码在已经可滚动的页面内创建了一个可滚动元素。也许尝试在滚动之前单击您的页面以确保舒尔。


推荐阅读