JQuery Sortable Scroll，可以向上滚动但无法向下滚动。

Question

JQuery Sortable Scroll，可以向上滚动但无法向下滚动。

3

我的问题就像标题所说的一样。我的工作是在JSP中进行的，但为了清晰起见，我已经尽可能在HTML中重新创建了这个问题。基本上，在主页面（非简化版本）中，我正在使用sortable使元素可以通过拖放方法（移动列表项）重新排列。当我在页面底部时，页面只允许滚动（碰撞式滚动），这只是简单地扩展了包含div的底部并添加了滚动条。我需要的是当上下存在元素时（我已经设置为sortable的元素），我需要页面/包含元素允许我上下滚动。

以下代码是一个非常基本的重现，这段代码允许我在不在元素顶部时向上滚动，但在任何情况下都不会允许我在元素的任何位置向下滚动。

这里是重现：

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
  $(function() {
    $("#sortable").sortable({placeholder:"placeHolder", scroll: true, axis: "y", opacity: 0.5});
    $("#sortable").disableSelection();
  });
</script>
<style>
  #sortable{
    list-style:none;
  }
  .formatlist{
    border: 2px solid red;
    padding: 40px;
    margin: 5px;
    width: 50%;
    text-align: center;
  }
  .placeHolder{
    border: 2px solid #ff8833;
    padding: 40px;
    margin: 5px;
    width: 50%;
    text-align: center;
    background-color: #ffee88; 
  }
</style>
  </head>
  <body>
    <div>
  <ul id="sortable">
    <li class="formatSort"><div class="formatlist">NUMERO ONE This is a test on a list that drags LalLalala......</div></li>
    <li class="formatSort"><div class="formatlist">NUMERO TWO This is a test on a list that drags LalLalala......</div></li>
    <li class="formatSort"><div class="formatlist">NUMERO THREE This is a test on a list that drags LalLalala....</div></li>
    <li class="formatSort"><div class="formatlist">NUMERO FOUR This is a test on a list that drags LalLalala.....</div></li>
    <li class="formatSort"><div class="formatlist">NUMERO FIVE This is a test on a list that drags LalLalala.....</div></li>
    <li class="formatSort"><div class="formatlist">NUMERO SIX This is a test on a list that drags LalLalala......</div></li>
    <li class="formatSort"><div class="formatlist">NUMERO SEVEN This is a test on a list that drags LalLalala....</div></li>
    <li class="formatSort"><div class="formatlist">NUMERO EIGHT This is a test on a list that drags LalLalala....</div></li>
    <li class="formatSort"><div class="formatlist">NUMERO NINE This is a test on a list that drags LalLalala.....</div></li>
  </ul>
</div>

- Phish

@apaul34208 - 我现在玩得更多了，我认为这是一个Firefox的问题！要在JFiddle中重新创建，在firebug中将JFiddle输出窗口更改为比可见文档大小更大，然后发生相同的情况！ - Phish

我正在使用Firefox v23，它可以正常工作，但在Chrome中却奇怪地无法工作http://jsfiddle.net/apaul34208/pzGgK/embedded/result/ - apaul

1

尝试将代码放入HTML文档中，这就是我遇到问题的地方（除了IE之外），我有点困惑，至少可以这么说！ - Phish

IE是一个令人讨厌的不兼容浏览器，看起来很奇怪它是唯一没有给你问题的浏览器... - apaul

1

讽刺让我感到沮丧 /: - Phish

显示剩余2条评论

2个回答

0

apaul的答案对我有用。向上滚动可以，但向下滚动不行。

在我的情况下，我将 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 改为了 <!DOCTYPE html>

- Mike Volmar

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

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

- apaul · Accepted Answer

我想我明白了，您漏掉了文档类型。我在文档开头添加了<!DOCTYPE html>，放在<html>的前面，这样就可以了。

<!DOCTYPE html>
<html>
  <head> ... and so on

jsFiddle会自动添加它，因此重新创建会有麻烦。