Question

我对目前的网页非常困惑：http://armandbakx.nl/ - （调整后，我不在这里进行自我宣传）。

我的想法是我的页面上有几张图片，可以点击。点击后，会弹出一个可滚动的容器，显示更多信息和图像。

到目前为止，在这里一些优秀人才的帮助下，我设法让JavaScript工作。我现在遇到的唯一问题是，当我点击图片时，整个＆＃39;后页＆＃39;转移。我不确定是什么造成了这种情况，更不确定如何解决这个问题。

其次，当点击图像并且可滚动容器“徘徊”时。在主页上，似乎其他图像仍然响应点击..我已经将z-index打到荒谬的金额，但它仍然这样做。我不认为这是一个JavaScript问题，但无法理解在CSS中导致此问题的原因。

第三，当单击.img并滚动浏览可滚动容器的内容时，当您向主页面单击时，它通常也会向上或向下滚动。我该如何防止这种情况发生？

我希望它有点可理解，我希望有人愿意帮助我。我这里有一个codepen，除了图像之外，此页面的所有内容都在运行。 Codepen

$('img').on('click', show);
$('.overlay').on('click', hide);

function show(){   
   $('.scroll-container').eq($(this).parent().index()).addClass('show');
   $('.content-container').addClass('no-scroll');
   $('.overlay').addClass('opacity');
}

function hide() {
   $('.scroll-container').removeClass('show');
   $('.content-container').removeClass('no-scroll');
   $('.overlay').removeClass('opacity');
}

Answer 1

我决定回答你的第三个问题，这种方法也可能会阻止其他问题。

在show函数内部，记录打开内容时浏览器所处的位置。然后，在您的隐藏功能中，将浏览器返回到该位置。这样可以防止你的盒子移动。

这是一个例子。我将所有东西都包装在一个立即调用的函数中，以防止变量成为全局变量。

(function(){

var currentTop = 0;

$('img').on('click', show);
$('.overlay').on('click', hide);

function show(){  

    currentTop = $(window).scrollTop();

   $('.scroll-container').eq($(this).parent().index()).addClass('show');
   $('.content-container').addClass('no-scroll');
   $('.overlay').addClass('opacity');
}

function hide() {

    $(window).scrollTop(currentTop);

   $('.scroll-container').removeClass('show');
   $('.content-container').removeClass('no-scroll');
   $('.overlay').removeClass('opacity');
}


})();

为什么我的页面如此跳跃？

1 个答案: