javascript - 如何禁用 "background-attatchment: fixed"会导致错误

Question

关于这个问题，我查看了所有堆栈溢出并找到了各种答案，但没有一个符合我的需要。我将我的背景附件设置为“固定”，但正如大多数人所知，这个错误在 ios 设备上出现。有没有一种方法可以在它不起作用时将属性设置为“滚动”？如果该属性从一开始就设置为“滚动”，则图片不会调整大小，也不会做一些奇怪的事情。

我已经尝试过各种解决方案，包括“@supports”、使用网络工具包和其他 stackOverflow 建议的解决方案……但都没有奏效。我希望有一个解决方法，或者甚至只是让该功能在它可以工作的时候工作，而在它不能工作的时候被禁用。

这是我的 CSS

.sectionHeader{
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    max-width: 100%;
    height: 100vh;
    padding: 0px !important;
    margin: 0px !important;
}

这是应用到的 div 之一:

    <div id="welcome">
        <div id="jumboName" class="jumbotron jumbotron-fluid sectionHeader d-flex align-items-center" style="background-image: url('data/welcome.JPG');">
            <div class="row mx-auto my-auto align-items-center">
                <p class="display-3" style="color:WHITESMOKE; text-shadow: 0px 0px 5px black;">Name</p>
            </div>
        </div>
    </div>

同样，这样做的目标是找到解决方法，或者只是不让手机上的代码中断，同时仍然对计算机产生影响。这已经发生在大多数网络浏览器上，当它无法处理该属性时，它会将背景样式默认为“滚动”(brave、opera 和其他一些)。愚蠢的 iOS 设备不够智能，无法做到这一点。

Answer 1

我终于找到了一个好的答案!唯一不使用此功能的浏览器(据我所知)是移动设备。因此，我们可以使用媒体查询。

@media (hover: none) {
    .sectionHeader{
        background-attachment: scroll;
    }
}

使用它，我们可以将 background-attachment 属性设置为固定，除非设备上没有启用悬停。