格Mozilla的鼠标滚轮滚动的模糊效果的内容
问题描述:
我想从这个codepen重新作出的iOS 7风格的模糊标题:格Mozilla的鼠标滚轮滚动的模糊效果的内容
https://codepen.io/rikschennink/pen/zvcgx //code bellow
一切工作在Safari和Chrome(和罚款,whitch出乎我的意料,在Android和iOS设备)。 但在Firefox中,鼠标滚轮不起作用。滚动通过滚动条工作,但不通过鼠标滚轮。
这个问题不只是我的结果(http://www.letsmind.cz)出现,而且在原来的CodePen渲染。
我想这是造成与隐藏溢出的东西,但我不明白它如何能在Safari浏览器等方面的工作,但不只是在一个Mozilla。
感谢的您的时间和答案,如果你能看着办吧! :)
编辑:触摸屏滚动是好的,即使在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);
});
答
我设法与最大的财富解决这个问题,通过增加这个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;
});
它莫名其妙地“解锁”鼠标滚轮。不知道为什么,不知道如何,但它有效。
而在Firefox中的问题是(我认为),当HTML,体{overflow:hidden;},然后当你允许滚动div内,它不会触发滚动鼠标(但滚动条和触摸板工作正常)。
感谢的您的时间,还是它的窃听,但我知道如何规避它。