Question

我正在建立我的第一个网站，但遇到一个我无法轻易解决的问题，因为我不确定如何用Google搜索来表达它。我需要在不使滚动条出现的情况下将图像滑动到页面中，或者，而无需在页面上扩展宽度以容纳新出现的图像。

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

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

当您单击住宿选项卡中每个公寓的蓝图旁边的箭头时，我需要帮助的部分是图片的滑动。如果您想看一下代码，相关的代码在JqueryAnimate.js文件中，但请记住，注释不是英文的，我是新来的，所以代码有点怪异，而CSS却不是。还没有微调。我将相关的代码片段进一步发布了。我当前的问题是幻灯片动画。我现在的做法是从一开始就将所有图像保存在那里，但是除了一个图像外，其他所有图像都没有显示：当您单击右侧的箭头时，它会淡出并滑出当前图片（使用Jquery），并打开下一张图片（相对位于左侧：2000px）的显示，同时将其向左移动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

尝试通过overflow:hidden在span上添加id="apImgBox"

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
}

链接到MDN

设置元素动画时如何阻止页面展开，使其从屏幕外滑入？

2 个答案: