滚动到顶部不可思议或作物顶部溢出

Question

这个问题有点难以解释：我有一个图像在页面的底部。单击该图像时，我通过ajax加载下一页，而不删除该图像。如何裁剪或删除图像上方的所有空间？或者，也许更好的方法是如何不明显地滚动到顶部？

Here is perfect example我想要完成的任务 - 转到页面底部，看看当您单击图像时会发生什么。这背后的概念是什么？

Answer 1

我可以具体告诉你该网站正在做什么。

它们每个页面都放在一个名为<div class="page-container">的容器中。当您单击底部链接时，会添加一个新的<div class="page-container">，并附带一个css top属性，该属性将其从屏幕底部推出，并且两个页面容器均设置为position:absolute。

两个页面容器的top css属性都使用Javascript计时器进行动画处理，直到第一个<div class="page-container">被推离屏幕顶部，然后第一个页面容器从DOM中移除。

与此同时页面容器正在通过操作的top属性移动，滚动条的位置是动画的，因此它随容器一起移动。动画完成后，新页面容器设置为position:relative，滚动条再次位于屏幕的顶部。

下面是使用jQuery为了方便https://jsfiddle.net/0bzt9mmq/

Answer 2

你也可以这样做一个粗略的例子。 https://jsfiddle.net/vh60oycj/2/

HTML

<div id="container"></div> 

CSS

body{ 
    width:100%; 
    height:100%; 
} 
#container{ 
    width:100vw; 
    height:100vh; 
} 

.img_elems{ 
    width: 640px; 
    height: 480px; 
    padding: 5px; 
} 

.pages{ 
    width: 640px; 
    height: 480px; 
    margin: 5px; 
    background: #000; 
    color:#fff; 
} 

.label{ 
    width: 20px; 
    height: 20px; 
    background-color: #fff; 
    padding: 5px; 
} 

.move{ 
    position: relative; 
    -webkit-animation-name: slide; /* Chrome, Safari, Opera */ 
    -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */ 
    animation-name: slide; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */ 
    animation-fill-mode: forwards; 
} 

@-webkit-keyframes slide { 
    0% { top: 100%} 
    100% { top: 0;} 
} 

@keyframes slide { 
    0% { top: 100%} 
    100% { top: 0;} 
} 

.fade{ 
    position: relative; 
    -webkit-animation-name: fade; /* Chrome, Safari, Opera */ 
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */ 
    animation-name: fade; 
    animation-duration: 2s; 
} 

@-webkit-keyframes fade { 
    0% { opacity : 0;} 
    100% { opacity : 1;} 
} 

JS

var get_some_images = "https://placehold.it/640x480"; 
var get_container = document.getElementById("container"); 

init(11); 

//function that create the it 
function create_img_elem(content,index){ 
    var new_elem = document.createElement("div"); 
    var label = document.createElement("div"); 
    new_elem.className = "img_elems"; 
    new_elem.id = "img_elem"+index; 
    new_elem.style.background = "url('"+ content +"') no-repeat center"; 
    new_elem.setAttribute("data-elem-num", index); 

    label.className = "label"; 
    label.id = "label" + index; 
    label.innerHTML = "#" + index; 

    new_elem.appendChild(label) 
    get_container.appendChild(new_elem); 
} 

//function that create the elem 
function create_page(content,index){ 
    var new_elem = document.createElement("div"); 
    var label = document.createElement("div"); 
    new_elem.className = "pages"; 
    new_elem.id = "page" + index; 
    new_elem.innerHTML = content; 
    new_elem.setAttribute("data-elem-num", index); 
    get_container.appendChild(new_elem); 
    $("#page" + index).addClass("fade"); 
} 

function click_event (clicked_img){ 

    //getting all the elements on container 
    var array_elems = $('#container').children(); 

    //getting data attributes "data-elem-num" of clicked_element 
    var clicked_elem = clicked_img[0].attributes[2].value; 

    //store "data-elem-num" attr 
    var elem_ids; 

    for(var j = 0, len_elems = array_elems.length; j <len_elems;j++){ 
    elem_ids = array_elems[j].attributes[2].value; 

    //store "data-elem-num" attr 
    if(elem_ids !== clicked_elem){ 
     //instead of fadeout from jquery, you can do css animation. better animation that way 
     $("#img_elem" + elem_ids).fadeOut("fast"); 

    }else{ 
     create_page("this is about element " + clicked_elem, clicked_elem); 
     $("#img_elem" + clicked_elem).addClass('move fade').css("pointer-events", "none"); 
    } 

    } 
} 

function init(amount_of_elements){ 
    for(var i=0, len = amount_of_elements; i < len; i++){ 
    create_img_elem(get_some_images,i) 
    } 
    $(".img_elems").click(function(){ 
    click_event ($(this)); 
    }); 
} 

我正在访问已点击并循环的DOM对象，看看是否有匹配我点击的项目。如果不隐藏它们，后缀会淡化元素和任何其他元素。我知道你已经有了解决方案，我想这是更多的资源。