Question

这让我疯了。

基本上，当我在水平滑动div中使用锚点时，我需要阻止页面垂直跳跃。目前，页面并没有恰到好处地跳跃，而是垂直跳跃，这是一个大问题。我有一个小提琴来解释它：

代码如下所示：

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密钥上，毫无疑问，它用于从未正常工作的旧粗略浏览器中。我对那部分感到非常兴奋。

非常感谢！

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");
});

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

阻止锚垂直跳跃

1 个答案: