Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/412.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 为什么我不能在不移动鼠标的情况下滚动视差?_Javascript_Html_Css_Vue.js_Scrollbar - Fatal编程技术网

Javascript 为什么我不能在不移动鼠标的情况下滚动视差?

Javascript 为什么我不能在不移动鼠标的情况下滚动视差?,javascript,html,css,vue.js,scrollbar,Javascript,Html,Css,Vue.js,Scrollbar,所以我试着做一个带有视差着陆图片的网页。为了让视差效果发挥作用,它的高度更高,因此用户必须向下滚动。这将在侧面仅为该视差创建第二个滚动条。到现在为止,一直都还不错。问题是当我向下滚动到视差的末尾时,第二个滚动条没有自动激活,我必须稍微移动鼠标才能继续滚动网页的正常内容。 以下是我的问题的一个工作示例: 有没有什么方法可以让它在到达视差结束后不移动鼠标就一直滚动 *{ 框大小:边框框; } html, 身体{ 背景色:#fedcc8; } .视差{ -webkit透视图:100px; 透视图:

所以我试着做一个带有视差着陆图片的网页。为了让视差效果发挥作用,它的高度更高,因此用户必须向下滚动。这将在侧面仅为该视差创建第二个滚动条。到现在为止,一直都还不错。问题是当我向下滚动到视差的末尾时,第二个滚动条没有自动激活,我必须稍微移动鼠标才能继续滚动网页的正常内容。 以下是我的问题的一个工作示例:

有没有什么方法可以让它在到达视差结束后不移动鼠标就一直滚动

*{
框大小:边框框;
}
html,
身体{
背景色:#fedcc8;
}
.视差{
-webkit透视图:100px;
透视图:100px;
高度:100vh;
溢出x:隐藏;
溢出y:自动;
位置:绝对位置;
排名:0;
左:50%;
右:0;
底部:0;
左边距:-1500px;
}
.视差层{
位置:绝对位置;
排名:0;
右:0;
底部:0;
左:0;
}
.视差层img{
显示:块;
位置:绝对位置;
底部:0;
}
.视差盖{
背景:#2d112b;
显示:块;
位置:绝对位置;
最高:100%;
左:0;
右:0;
高度:1000px;
z指数:2;
}
.视差层0{
-webkit变换:translateZ(-300px)标度(4);
变换:translateZ(-300px)刻度(4);
}
.视差层1{
-webkit转换:translateZ(-250px)标度(3.5);
变换:translateZ(-250px)标度(3.5);
}
.视差层2{
-webkit转换:translateZ(-200px)标度(3);
变换:translateZ(-200px)标度(3);
}
.视差层3{
-webkit转换:translateZ(-150px)标度(2.5);
变换:translateZ(-150px)标度(2.5);
}
.视差层4{
-webkit变换:translateZ(-100px)标度(2);
变换:translateZ(-100px)标度(2);
}
.视差层5{
-webkit转换:translateZ(-50px)标度(1.5);
变换:translateZ(-50px)标度(1.5);
}
.视差层6{
-webkit变换:translateZ(0px)标度(1);
变换:translateZ(0px)标度(1);
}

Lorem ipsum dolor sit amet,Concertetur adipi
scin精英。母猫怀孕时的排卵期
波尔塔。Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet,Concertetur adipi
scin精英。母猫怀孕时的排卵期
波尔塔。Lorem ipsum dolor sit amet。 Lorem ipsum dolor sit amet,Concertetur adipi
scin精英。母猫怀孕时的排卵期
波尔塔。Lorem ipsum door sit amet.Lorem ipsum door sit amet,concetetur adipi
scin精英。母猫怀孕时的排卵期
波尔塔。Lorem ipsum dolor sit amet。 技能 我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们 点燃。母猫怀孕时的产卵期。
首先,我建议添加一个
位置:相对.parallax
中选择code>,以便执行以下操作

您遇到的问题是与浏览器相关的滚动问题,而不是您的代码问题(它在Firefox上工作,但在Chrome上不起作用)。所以没有“修复”

但显然还有其他方法可以使用视差来防止问题的发生,比如不依赖浏览器的滚动来手动滚动每个视差

或者,您可以在到达顶部或底部时模拟单击,以克服问题:

$('div').on('scroll', chk_scroll);

function chk_scroll(e) {
  var elem = $(e.currentTarget);

  if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
    $("#parallax").trigger("click");
  } else if (elem.scrollTop() == 0) {
    $("#parallax").trigger("click");
  }
}
$('div')。在('scroll',chk_scroll)上;
功能chk_滚动(e){
var elem=$(e.currentTarget);
if(elem[0].scrollHeight-elem.scrollTop()==elem.outerHeight()){
$(“视差”)。触发(“点击”);
}else if(元素scrollTop()==0){
$(“视差”)。触发(“点击”);
}
}
*{
框大小:边框框;
}
html,
身体{
背景色:#fedcc8;
}
.视差{
-webkit透视图:100px;
透视图:100px;
高度:100vh;
溢出x:隐藏;
溢出y:自动;
位置:相对位置;
排名:0;
左:50%;
右:0;
底部:0;
左边距:-1500px;
}
.视差层{
位置:绝对位置;
排名:0;
右:0;
底部:0;
左:0;
}
.视差层img{
显示:块;
位置:绝对位置;
底部:0;
}
.视差盖{
背景:#2d112b;
显示:块;
位置:绝对位置;
最高:100%;
左:0;
右:0;
高度:1000px;
z指数:2;
}
.视差层0{
-webkit变换:translateZ(-300px)标度(4);
变换:translateZ(-300px)刻度(4);
}
.视差层1{
-webkit转换:translateZ(-250px)标度(3.5);
变换:translateZ(-250px)标度(3.5);
}
.视差层2{
-webkit转换:translateZ(-200px)标度(3);
变换:translateZ(-200px)标度(3);
}
.视差层3{
-webkit转换:translateZ(-150px)标度(2.5);
变换:translateZ(-150px)标度(2.5);
}
.视差层4{
-webkit变换:translateZ(-100px)标度(2);
变换:translateZ(-100px)标度(2);
}
.视差层5{
-webkit转换:translateZ(-50px)标度(1.5);
变换:translateZ(-50px)标度(1.5);
}
.视差层6{
-webkit变换:translateZ(0px)标度(1);
变换:translateZ(0px)标度(1);
}

Lorem ipsum dolor sit amet,Concertetur adipi
scin精英。母猫怀孕时的排卵期
波尔塔。乱数假文