Question

我正在进行星期五的测验！我想使用scrollLeft-jQuery效果来转到下一个问题。我以前使用过这个问题没有问题，但现在它像疯了一样跳起来。我做错了什么？

网站：www.carlpapworth.com/friday-quiz /

HTML：

                <div id="qWrap">
                    <ul id="qBox">
    <!--Q1-->           <li id="q1" class="qContainer">
                        <div class="qQuestion"><?php echo $Q1; ?>
                        </div>
                        <ul class="qAnswers">
                            <li><a href="#q2" class="<?php echo $Q1aClass; ?>"><h3><?php echo $Q1a; ?></h3></a></li>
                            <li><a href="#q2" class="<?php echo $Q1bClass; ?>"><h3><?php echo $Q1b; ?></h3></a></li>
                            <li><a href="#q2" class="<?php echo $Q1cClass; ?>"><h3><?php echo $Q1c; ?></h3></a></li>
                        </ul>
                    </li>
<!--Q2-->           <li id="q2" class="qContainer">
                        <div class="qQuestion"><?php echo $Q2; ?>
                        </div>
                        <ul class="qAnswers">
                            <li><a href="#q3" class="<?php echo $Q2aClass; ?>"><h3><?php echo $Q2a; ?></h3></a></li>
                            <li><a href="#q3" class="<?php echo $Q2bClass; ?>"><h3><?php echo $Q2b; ?></h3></a></li>

                            <li><a href="#q3" class="<?php echo $Q2cClass; ?>"><h3><?php echo $Q2c; ?></h3></a></li>
                        </ul>
                    </li>
     </ul>
    </div>

CSS：

#qWrap{
width: 480px;
height: 260px;
margin: 0 auto;
overflow: scroll;
}

#qBox{
width: 1100%;
height: 260px;
display: block;
}


li.qContainer {
position: relative;
width: 9%!important;
height: 260px!important;
padding: 0px 0px;
margin: 0 50px 0 0px;
float: left;
}


.qQuestion {
width: 480px;
height: 50px;
padding: 10px 0px;
font-family: corbel;
font-size: 28px;
text-align: center;
color: #ffffff;
}

JS：

$(document).ready(function() {  
    $('.qAnswers li a').bind('click',function(event){
                        var $anchor = $(this);
                        $('#qWrap').stop().animate({
                            scrollLeft: $($anchor.attr('href')).offset().left
                        }, 2000);
                        event.preventDefault();
                    });
 });

Answer 1

您生成的标记很糟糕。在控制台中查看源代码。伪标记如下：

<qwrap>
  <qbox>
    <li.qcontainer />
    <q2 />
    <li.qcontainer>
      <q3 />
    </li.qcontainer>
  </qbox>
</qwrap>

如果您还运行以下查询，您将看到它们滚动到不同位置的原因。由于标记已关闭，offset基于问题的不同offsetParent进行计算，因此它会不一致地滚动。

$('#q2').offsetParent();
$('#q3').offsetParent();

修复您的标记，滚动问题就会消失。

编辑：一旦您的标记正确，您就可以通过检查qWrap属性来计算滚动position的距离。 offset与文档相关，而position将报告相对于父项的偏移量。见http://api.jquery.com/position/

将position: relative添加到qBox。这将使position相对于滚动框的问题。

然后您的代码就像您已经拥有的那样，除了将offset更改为position。

$(document).ready(function() {  
    $('.qAnswers li a').bind('click',function(event){
                        var $anchor = $(this);
                        $('#qWrap').stop().animate({
                            scrollLeft: $($anchor.attr('href')).position().left
                        }, 2000);
                        event.preventDefault();
                    });
 });

Answer 2

在.stop（）中，放

.stop(true, true).animate

看看这对你有帮助。

ScrollLeft滚动到错误的位置

2 个答案: