阻止锚点在垂直方向上跳动

Question

阻止锚点在垂直方向上跳动

3

这真让我发疯。基本上，我需要在水平滑动的 div 中使用锚点时阻止页面垂直跳动。目前，页面不仅漂亮地左右跳动，还会垂直跳动，这是一个大问题。我有一个 fiddle 在这里解释它：http://jsfiddle.net/gkp17fap/4/ 代码如下：

a  {
    color:#ccc;
    padding:8px;
    margin:2px;
    display:block;
}


div.container {
    width:250px;
    height:350px;
    overflow:hidden;
    display:block;
    background:#ccc;
    border:solid 1px #555;
}

div.wide {
    display:block;
    height:350px;
    width:auto;
}

div.inner {
    height:350px;
    width:250px;
    display:inline-block;
    float:left;
}

.blue {
    background:blue;
}

.red {
    background:red;
}

.yellow {
    background:yellow;
}

.green {
    background:green;
}

.white {
    background:white;
}

.black {
    background:black;
}

}

<div class="container">
    
    <div class="wide">
        
        
        <div class="inner blue" id="one">  <a href="#one">ONE</a><br><a href="#two">TWO</a><br><a href="#three">THREE</a><br><a href="#four">FOUR</a><br><a href="#five">FIVE</a><br><a href="#six">SIX</a><br>  </div>
        <div class="inner red" id="two">  <a href="#one">ONE</a><br><a href="#two">TWO</a><br><a href="#three">THREE</a><br><a href="#four">FOUR</a><br><a href="#five">FIVE</a><br><a href="#six">SIX</a><br>  </div>
        <div class="inner yellow" id="three">  <a href="#one">ONE</a><br><a href="#two">TWO</a><br><a href="#three">THREE</a><br><a href="#four">FOUR</a><br><a href="#five">FIVE</a><br><a href="#six">SIX</a><br>  </div>
        <div class="inner green" id="four">  <a href="#one">ONE</a><br><a href="#two">TWO</a><br><a href="#three">THREE</a><br><a href="#four">FOUR</a><br><a href="#five">FIVE</a><br><a href="#six">SIX</a><br>  </div>
        <div class="inner white" id="five">  <a href="#one">ONE</a><br><a href="#two">TWO</a><br><a href="#three">THREE</a><br><a href="#four">FOUR</a><br><a href="#five">FIVE</a><br><a href="#six">SIX</a><br>  </div>
        <div class="inner black" id="six">  <a href="#one">ONE</a><br><a href="#two">TWO</a><br><a href="#three">THREE</a><br><a href="#four">FOUR</a><br><a href="#five">FIVE</a><br><a href="#six">SIX</a><br>   </div>
        
    </div>

</div> 

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

我已经尝试了我能想到的一切，现在我的大脑空空如也。有人可以帮忙去掉页面的竖向跳动吗？

哦，我还希望给出最简单的解释，因为这个项目也将分发在USB键上，并且无疑会在从未正确工作过的旧浏览器中使用。我对此部分感到非常兴奋。

非常感谢！

- Jeff Monk

你尝试设置 body 的 margin 值为 0 吗？ - Luís P. A.

2

首先，这是一种聪明的方法，使用纯CSS在单击时更改背景颜色。我以前从未见过这样的方法。但是，根据我所知，由于您正在使用此方法，我认为您将无法防止跳跃行为。是否排除使用JavaScript？ - biggles

背景颜色只是展示不同div的一种方式。在实际页面中，每个div都有不同的图像，用作我公司生产的触摸屏产品的仿真器。但还是谢谢你的称赞 :)因此，每个div中都有一个图像，并且链接旨在将包含的div滑动到具有正确图像的内部div中。但是，那该死的垂直跳动...是否有一种编码方式，使任何带有ID的链接都关闭垂直滚动？我正在运行简单页面转换的jquery，但我担心为旧版不稳定的浏览器添加太多代码... - Jeff Monk

我更新了这个fiddle，将div向下推，创建垂直页面滚动。正如你所看到的，当你点击一个链接时，它会垂直跳跃，并水平滑动以显示正确的div。我需要停止这种垂直跳跃。再次感谢大家的帮助！ - Jeff Monk

当单击锚点时，浏览器滚动/聚焦到该位置似乎是预期的行为。因此，您可以使用JavaScript更改该行为，或者尝试将#target放置在页面顶部，这样它就没有任何可滚动的地方了。另外，你的HTML代码似乎有些混乱，我相信所有那些br标签也没有帮助。 - Waxi

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- connexo · Answer 1

问题可能来自两个方向。首先，内部的div实际上没有左浮动。 div.wide具有width: auto;，因为其父级宽度固定为250px，所以它只占该宽度的100％，因此它也具有（计算出来的）宽度为250px。因此，您的div.inner不是彼此相邻的左右，而是上下。

由于您可能无法将固定宽度应用于div.wide，因为您可能事先不知道在所有情况下会有多少个div.inner，因此我建议您选择一个足够宽以容纳所有左浮动div.inner并排放置的宽度，或通过计算div.inner的宽度，并将其乘以div.inner的宽度来计算所需宽度。

$(document).ready(function() {
  var noOfSlides = $(".inner").length;
  var slideWidth = $(".inner").first().width();
  $(".wide).css("width", (noOfSlides * slideWidth)+"px");
});

问题可能来自第二个方向，即页面锚点的工作方式。但首先请尝试我建议的解决方案，并报告是否有效。