jQuery滚动文本框

Question

我使用的滚动框效果很好* 请参见此处 *，前提是我下面没有太多内容，例如：

<article class="content">                                                                           
                    <ul>
                        <li>
                            <a title="Video" href=".php">
                                <img alt="" src=".jpg" width="200" height="124"/>
                                <span>video</span>
                                <strong>Motion Graphics</strong>
                            </a>
                        </li>
                                                    <li>
                            <a title="Video" href=".php">
                                <img alt="" src=".jpg" width="200" height="124"/>
                                <span>video</span>
                                <strong>Motion Graphics</strong>
                            </a>
                        </li>
                        <li>
                            <a title="Video" href=".php">
                                <img alt="" src=".jpg" width="200" height="124"/>
                                <span>video</span>
                                <strong>Motion Graphics</strong>
                            </a>
                        </li>

问题当我确实有一堆内容时，滚动框无法正常工作。 它表现为第一个“ 滚动宝贝”滚动内容。 它从顶部到底部怪异地移动，并且无法正确向下滚动。

我不明白为什么不能正常工作。

Answer 1

我在这里猜测，但是您是否表示这个问题仅发生在Opera中？ 如果是这样，则是因为此行：

$('html, body').animate(...);

问题在于Opera将首先对html进行动画处理，然后对身体进行动画处理。 我在这里找到了一个优雅的解决方案，该解决方案实际上提供了以下代码：

var scrollElement = 'html, body';
$('html, body').each(function(){
  var initScrollTop = $(this).attr('scrollTop');
  $(this).attr('scrollTop', initScrollTop + 1);
  if ($(this).attr('scrollTop') === initScrollTop + 1) {
    scrollElement = this.nodeName.toLowerCase();
    $(this).attr('scrollTop', initScrollTop);
    return false;
  }
});
scrollEl = $(scrollElement);

// further down, when you animate
scrollEl.animate(...);