3

所以我的问题正如标题所示。我的工作是在 JSP 中，但为了清楚起见，我已经尽我所能在 HTML 中重现了这个问题。本质上，在主页（非简化版）中，我使用 sortable 来允许以拖放方法重新排列元素（移动列表项）。当我位于页面底部时，页面仅允许滚动（凹凸滚动），它只是简单地扩展包含 div 的底部并添加滚动条。我需要的是当上面和下面有元素（我设置为可排序的元素）时，我需要页面/包含元素来允许我上下滚动。

下面的代码是一个非常基本的重新创建，当我不在元素的顶部时，这段代码允许我向上滚动，但在任何情况下都不允许我在元素的任何点向下滚动。

这是receation：

<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>

4

2 回答 2

3

我想我明白了，您缺少文档类型，我补充说：<!DOCTYPE html>在文档的最顶部，开口上方<html>，它起作用了。

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

jsFiddle 会自动添加它，因此很难重新创建它。

于 2013-08-21T14:55:28.167 回答
0

apaul 的回答对我有用。向上滚动有效，但向下滚动无效。

就我而言，我 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 改为 <!DOCTYPE html>

于 2021-09-21T18:57:30.333 回答