不透明地滚动到顶部或裁剪顶部溢出

Scroll to top unoticably or crop top overflow

本文关键字：顶部 溢出 裁剪 滚动 不透明      更新时间：2023-09-26

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

这是我试图完成的完美示例 - 转到页面底部，看看单击图像时会发生什么。这背后的概念是什么？

我可以具体告诉你那个网站在做什么。

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

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

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

下面是一个使用jQuery的粗略示例，以方便 https://jsfiddle.net/0bzt9mmq/

你也可以做这样的事情。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 对象，以查看是否有任何与我单击的项目匹配。 如果不隐藏它们，后记会淡入元素和任何其他元素。我知道你已经有了解决方案，我想还有更多的资源。

相关文章：