如何在为元素设置动画时阻止页面扩展，使其从屏幕外滑入? [英] How do I stop the page from expanding when animating an element so it slides in from off screen?

问题描述

我正在制作我的第一个网站，但遇到了一个无法轻松解决的问题，因为我不知道如何用 google 搜索来搜索它.我需要将图像滑入页面而不显示滚动条，或者更确切地说，页面宽度不扩展以在滑入时包含新出现的图像.

这是页面的实际测试版本:

http://test.dingac.com/accommodation.html

我需要帮助的部分是当您单击住宿选项卡中每间公寓的蓝图旁边的箭头时，图片的滑动.如果你想看代码，相关代码在 JqueryAnimate.js 文件中，但请记住，注释不是英文的，我是新手，所以代码有点奇怪，CSS 不是't 微调了.我已经在下面发布了相关的代码片段.我目前的问题是幻灯片动画.我现在这样做的方法是让所有图像从一开始就在那里，但除了一个之外，所有图像都有 display:none.当您单击向右的箭头时，它会淡出并滑出当前图片(使用 Jquery)并打开下一张图片(相对位于左侧:2000px)的显示，同时将其动画化到 left:0px.在新图像出现的那一刻，页面看到页面上有一个新元素，而不是所有内容都在显示，因此它扩展了页面的宽度以包含屏幕外图片.这只是在桌面上的一个烦恼，因为它只会显示滚动条，但在移动设备上它会缩小整个页面，直到新图片出现在屏幕上，然后在图片滑入时再放大.

$("#buttonRight"+apInd).click(function(){if(status[apInd].circleIndex!=status[apInd].numApPic){status[apInd].Picture.fadeOut({duration: 1000, queue: false}).animate({left: '-2000px'},1000);status[apInd].NextPicture.fadeIn({duration: 1000, queue:false}).animate({left: '0px'},1000);status[apInd].PreviousPicture=status[apInd].Picture;status[apInd].Picture=status[apInd].NextPicture;$("#apCircle"+apInd+"-"+status[apInd].circleIndex).attr("class","circle");status[apInd].circleIndex++;$("#apCircle"+apInd+"-"+status[apInd].circleIndex).attr("class","circleSelected");status[apInd].NextPicture=$("#apPicture"+apInd+"-"+(status[apInd].circleIndex+1));}if(status[apInd].circleIndex===status[apInd].numApPic)//在选择边缘时隐藏/显示箭头{status[apInd].arrowDisplay="left";$("#buttonRight"+apInd).css("opacity",0).css("cursor","default");}别的{if(status[apInd].arrowDisplay!=="both"){status[apInd].arrowDisplay="两者";$("#buttonRight"+apInd).css("opacity",1).css("cursor","pointer");$("#buttonLeft"+apInd).css("opacity",1).css("cursor","pointer");}}});

我需要的是页面宽度保持不变，或者更具体地说，在移动设备上没有缩放，在桌面上没有水平滚动条.

解决方案

使用 overflow: hidden (或者，为了更细粒度的控制，overflow-x: hidden)在您的 CSS 中.

例如，如果这是您页面的 HTML:

<div id="page-wrap">内容

你可以像这样使用overflow:

#page-wrap {溢出-x:隐藏；//隐藏水平溢出元素溢出-y:自动；//如果内容垂直溢出，则显示滚动条}

链接到 MDN

I'm making my first website and I've run into a problem I can't easily fix as I'm not sure how to phrase a google search for it. I need to slide images into the page without making the scroll bar appear or, rather, without the page expanding in width to encompass the newly appeared image while it slides in.

Here's the actual test version of the page:

http://test.dingac.com/accommodation.html

The part I need help with is the sliding of the pictures when you click on the arrows next to the blueprint for each apartment in the accommodation tab. If you want to look at the code, the relevant code is in the JqueryAnimate.js file but keep in mind, the comments aren't in English, I'm new to this so the code is a bit weird and the CSS isn't fine tuned yet. I've posted the relevant code snippet further down. My current issue is the slide animation. The way I did it right now is for all the images to be there from the start but all but one have display:none. When you click the arrow to the right it fades out and slides out the current picture (using Jquery) and turns on the display of the next picture (which is positioned relatively at left: 2000px) while animating it to left:0px. In the moment the new image appears, the page sees that a new element is on the page and not everything is being displayed so it expands the width of the page to encompass the off-screen picture. This is only an annoyance on desktop as it only makes the scroll bar appear, but on mobile it makes the whole page zoom out until the new picture is on screen and then zoom back in as the picture slides in.

$("#buttonRight"+apInd).click(function(){
  if(status[apInd].circleIndex!=status[apInd].numApPic){
    status[apInd].Picture.fadeOut({duration: 1000, queue: false}).animate({left: '-2000px'},1000);
    status[apInd].NextPicture.fadeIn({duration: 1000, queue:false}).animate({left: '0px'},1000);
    status[apInd].PreviousPicture=status[apInd].Picture;
    status[apInd].Picture=status[apInd].NextPicture;
    $("#apCircle"+apInd+"-"+status[apInd].circleIndex).attr("class","circle");
    status[apInd].circleIndex++;
    $("#apCircle"+apInd+"-"+status[apInd].circleIndex).attr("class","circleSelected");
    status[apInd].NextPicture=$("#apPicture"+apInd+"-"+(status[apInd].circleIndex+1));        
  }
  if(status[apInd].circleIndex===status[apInd].numApPic)                              //hiding/showing arrows when at the edge of the selection
  {
    status[apInd].arrowDisplay="left";
    $("#buttonRight"+apInd).css("opacity",0).css("cursor","default");
  }
  else
  {
    if(status[apInd].arrowDisplay!=="both")
    {
      status[apInd].arrowDisplay="both";
      $("#buttonRight"+apInd).css("opacity",1).css("cursor","pointer");
      $("#buttonLeft"+apInd).css("opacity",1).css("cursor","pointer");
    }
  }
});

What I need is for the page width to stay constant or, more specifically, that there be no zooming in mobile and no horizontal scroll bar on desktop.

解决方案

Use overflow: hidden (or, for more fine grained control, overflow-x: hidden) in your CSS.

For example, if this is the HTML of your page:

<body>
  <div id="page-wrap">
    Contents
  </div>
</body>

You can use overflow like so:

#page-wrap {
  overflow-x: hidden; // hides horizontal overflowing elements
  overflow-y: auto; // shows scrollbars if the content vertically overflows
}

Link to MDN

这篇关于如何在为元素设置动画时阻止页面扩展，使其从屏幕外滑入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！