Question

我在Edge中遇到滚动问题，

似乎与基础元素的粘性有关

这是网站链接http://www.power-sonic.co.uk/drm/#section1

滚动时，它应该在图像的右侧显示内容，它可以在除Edge之外的所有其他浏览器上使用。

但是，如果我将wrapper元素更改为位置：粘性它可以工作，但是非常滞后，

是否有更好的解决方案，为什么在Edge中存在相对位置的问题（如果那甚至是问题）。

HTML：

<div class="bg-parralax responsive-hide">
<section class="services-types container services-types-web">
    <div class="item is-business">
        <div class="pin-wrapper">
            <div class="image"></div>
            <div id="section1" class="font-o title">
                <h3>ABOUT THE DRM SYSTEM</h3>
            </div>
        </div>
    </div>
    <div id="test" class="item is-consumers">
        <div class="pin-wrapper">
            <div class="image"></div>
            <div class="titles">
                <div class="text-block">
                <h4>Designed by experts</h4>
                <p>Power Sonic has been a leading force within the power solutions
                    industry for nearly fifty years. The same amount of expertise, quality
                    control and innovation has gone into developing the DRM system.
                    The cutting edge software has been designed to specifically operate
                    the technology to maximize efficiency and reliability.</p>
                </div>
                <div class="text-block">
                <h4>Fully compliant to import and export power</h4>
                <p>The DRM system is designed to operate with grid systems to import
                    and export power with the voltage and frequency regulations
                    including, FFR and DFFR schemes required by utilities to support the
                    grid. The DRM system can be used to support the stabilization of the
                    power grid.</p>
                </div>
                <div class="text-block">
                <h4>Complete solution</h4>
                <p>Our DRM system has everything needed to connect to a building or
                    utility network. It is incredibly easy to install, integrate and maintain.</p>
                </div>
            </div>
        </div>
    </div>


    <div class="item bullets is-consumer">
        <div class="pin-wrapper">
            <div class="image"></div>
            <div class="list text-block">  
                <ul>      
                    <li style="margin-left: 0px;" class="hide-bullet"><h4>FEATURES</h4></li>                                  
                    <li>Ultra high efficiency</li>
                    <li>High performance in any climate</li>
                    <li>Modular, flexible and scalable</li>
                    <li>Smart energy management</li>
                    <li>Multi grid support functions</li>
                    <li>Innovative demand response software</li>
                    <li>Reliable, field proven technology</li>
                    <li>Compatible with different storage technologies</li>
                </ul>
            </div>
        </div>
    </div>
</section>
</div>

SCSS：

.services-types .item {
    height: 100vh;
    position: relative;
}

.scrollmagic-pin-spacer {
    position: absolute !important;
    clip: rect(auto, auto, auto, auto);
    width: 100%;
    height: 100% !important;
}

.pin-wrapper {
    height: 100%;
 }



.services-types-web .item.is-business .image {
    background-image: url("images/container-cutout.svg");
    top: 50%;
    margin-top: -200px;
    width: 50%;
    height: 463px;
    position: absolute;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.services-types-web .item.is-consumers .image {
    background-image: url("images/container-cutout.svg");
    top: -50%;
    margin-top: -200px;
    width: 50%;
    height: 463px;
    position: absolute;
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.services-types-web .item.is-consumer .image {
    background-image: url("images/container-cutout.svg");
    top: -50%;
    margin-top: -200px;
    width: 50%;
    height: 463px;
    position: absolute;
    background-position: center center;
    background-size: 100%;
   background-repeat: no-repeat;
}


.title {
    color: #3f434a;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    font-weight: 600;
    width: 600px;
    font-size: 55px;
    text-align: center;
    h3 {
        font-size: 70px
    } 
}

.titles {
    color: #3f434a;
    position: absolute;
    top: -44%;
    left: 70%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    text-align: left;
    width: 40%;
}

.list {
    position: absolute;
    top: -50%;
    left: 71.5%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    text-align: left;
    width: 40%;
}

.list li {
   margin-bottom: 12px;
   margin-left: 18px;
}

我还使用滚动魔术来控制滚动变化，但是我认为这不是问题的根源，但是如果有人认为是这样，我也可以包含该代码。

Answer 1

这是我发现的东西：

我测试了您的站点，发现Edge中的“ image”元素和“ edge-hide image”元素执行不正确：当出现“ item is-business”文本“ ABOUT THE DRM SYSTEM”时，第一个“ image” ”显示得很好，然后第一个项目文本消失，“ item is-consumers”的第二个文本块变为其最大不透明度，第一个“图像”元素仍然可见，而第二个包装器的第二个“边缘隐藏图像”是不可见的，同样，第三项的“边缘隐藏图像”也是不可见的。
我还在Chrome中测试了该网站，它的工作方式有所不同：当第一个项目文本消失并且“ item is-consumers”的第二个文本块变为最大不透明度时，第一个“ image”元素变为不可见并且第二个包装的第二个“隐藏图像”以及第三个项目的“隐藏图像”都可见。
Edge与JavaScript可能存在一些兼容性问题。您能否分享您的js源文件，尤其是“ sitea45afa79f7f3c8c24697.js”？

滚动的IE / Edge问题

1 个答案: