在为元素设置动画时如何阻止页面扩展，以便它从屏幕外滑入？

Question

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

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

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

我需要帮助的部分是当您单击住宿选项卡中每个公寓的蓝图旁边的箭头时图片的滑动。如果您想查看代码，相关代码在 JqueryAnimate.js 文件中，但请记住，注释不是英文的，我是新手，所以代码有点奇怪 CSS 还没有微调。我已经在下方发布了相关的代码片段。我当前的问题是幻灯片动画。我现在这样做的方法是让所有图像从一开始就在那里，但除了一个图像之外，其他图像都有 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)                              //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");
    }
  }
});

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

Answer 1

尝试在 span 和 id="apImgBox"

上添加 overflow:hidden

Answer 2

在 CSS.

中使用 overflow: hidden（或者，为了更精细的控制，overflow-x: hidden）

例如，如果这是您网页的 HTML：

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

您可以像这样使用 overflow：

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

Link 到 MDN

在为元素设置动画时如何阻止页面扩展，以便它从屏幕外滑入？

How do I stop the page from expanding when animating an element so it slides in from off screen?

javascript

mobile

scrollbar

slide