Question

我想从这个codepen中重新制作iOS 7样式模糊标题：

https://codepen.io/rikschennink/pen/zvcgx            //code bellow

Safari和Chrome中的一切都运行良好（并且，在Android和iOS设备上让我感到惊讶）。但是在Firefox中，鼠标滚轮不起作用。滚动通过滚动条工作，但不通过鼠标滚轮工作。

此问题并未出现在我的结果（http://www.letsmind.cz）中，也出现在原始CodePen渲染中。

我想这是隐藏溢出造成的，但我不知道它在Safari等中是如何工作的，而不仅仅是在Mozilla中。

感谢你的时间和答案，如果你能搞清楚的话！：）

编辑：Touchbar滚动很好，即使在Mozilla whitch真的很奇怪，因为它是鼠标滚轮事件，不是吗？

HTML：

<div class="screen">

        <header>

            <div class="contOfHeader">

                <img src="">
                <ul>
                    <li>Vývoj</li>
                    <li>Grafika</li>
                    <li>Animace</li>
                    <li>Kreativní služby</li>
                    <li>Kontakt</li>
                </ul>

            </div>

        </header>

        <div class="content-wrapper">
            <div class="content">
                <ol class="messages">

                    <li>

                        <div class="slider">
                        </div>

                        <p>Praesent porttitor nisl vel enim consectetur, vitae dictum ipsum condimentum.Praesent porttitor nisl vel enim consectetur, vitae dictum ipsum condimentum.</p>

                    </li>
                </ol>
            </div>
        </div>
    </div>
</div>

LESS：

    ::-webkit-scrollbar {
    display: none;
}

html {
    font-family:"Helvetica Neue","Helvetica",sans-serif;
    font-size:1rem;
}

html,body {
    margin:0;
    padding:0;
    background:#fff;
    overflow:hidden;
} 

.screen {
    position:absolute;
    width:100%;
    height:100%;
    overflow:hidden;
}

header {
    position:absolute;
    left:0;
    top:0;
    right:0;
    height:55px;
    overflow:hidden;
    background:#dedede;
    z-index:2;
    //box-shadow:0 1px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);

    .contOfHeader{
        position: relative;
        font-weight:normal;
        font-size:1rem;
        margin:0;
        padding:0;
        line-height:55px;
        text-align:center;
        z-index: 2;
        font-weight:100;
        font-size: 17px;

        img{
            display: inline-block;
        }
        ul{
            display: inline-block;
            li{
                display: inline-block;
                padding-left: 70px;
            }
        }
    }
}

.content-blurred {
    //margin-top:45px;
    //padding:0 1rem;
    position:absolute;
    top:0;
    left:0;
    right:0;
    filter:blur(7px);
    opacity:.5;
    z-index: 1;
}

.content-blurred .content {
  backface-visibility:hidden;
}

.content-wrapper {
    position:relative;
    //padding:0 1rem;
    z-index:1;
    height:100%;
    overflow:auto;
}

.content-wrapper .content {
    //margin-top:44px;
}

.content {
    display:block;
}

.messages {
    margin:0;
    padding:0;
}

.messages li {

}

.messages li:nth-child(even) {
    float:right;
}

.messages li:nth-child(even) img {
    float:right;
}

.messages li:nth-child(even) p {
    background:#158ffe;
    color:#fff;
}

.messages img {

}

JS：

    var content = document.querySelector('.content');
    var duplicate = content.cloneNode(true);
    var contentBlurred = document.createElement('div');
    contentBlurred.className = 'content-blurred';
    contentBlurred.appendChild(duplicate);

    var header = document.querySelector('header');
    header.appendChild(contentBlurred);

    var contentWrapper = document.querySelector('.content-wrapper'),
    translation;

    contentWrapper.addEventListener('scroll',function(){
      translation = 'translate3d(0,' + (-this.scrollTop + 'px') + ',0)';
      duplicate.style['-webkit-transform'] = translation;
      duplicate.style['-moz-transform'] = translation;
      duplicate.style['-ms-transform'] = translation;
      duplicate.style['transform'] = translation;

      console.log(duplicate);
    });

Answer 1

我设法用最大的财富修复它，将这个javascript添加到我的代码中：

var isMouseScroll = false;

window.addEventListener('wheel',function(e)
{
  console.log('mouse wheel');
  isMouseScroll = true;
});

window.addEventListener('scroll',function(e)
{
  if(!isMouseScroll) {
    console.log('scroll');
  }

  isMouseScroll = false;
});

以某种方式＆＃34;解锁＆＃34;鼠标滚轮。不知道为什么，不知道如何，但是它有效。

Firefox中的问题是（据我的想法），当html，body {overflow：hidden;}时，当你允许在内部滚动div时，它不会通过滚动鼠标来触发（但是滚动条和触摸板工作正常）。

感谢您的时间，但它仍然被窃听，但我知道如何逃避它。

模糊div Mozilla鼠标滚轮背后的内容

1 个答案: