问题：
设置scrollTop使滚动非常慢
廉元龙
我有两个div一个接一个。当我滚动div 1时，div 2也应该滚动，同样，如果我滚动div 2，div 1也应该滚动。我通过将div 1的scrollTop值设置为div 2和div 2设置为div 1来实现这一点。但是这里的问题是滚动事件被多次触发，滚动非常非常慢。我创建了一个现场演示有人能帮我吗？
(function() {
var target = $("#tableFixed");
$("#tableLista").scroll(function(e) {
target.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
e.preventDefault();
});
var target1 = $("#tableLista");
$("#tableFixed").scroll(function(e) {
target1.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
e.preventDefault();
});
})();.divScrollDiv {
display: inline-block;
width: 10%;
border: 1px solid black;
height: 100px;
overflow: scroll;
}
.tableNoScroll {
overflow: hidden;
overflow-y: scroll;
}<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<body>
<p>Scroll the left div, watch the right one.</p>
<table id="tableFixed" class="divScrollDiv tableNoScroll">
<tbody>
<tr>
<td>00</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
<tr>
<td>13</td>
</tr>
<tr>
<td>14</td>
</tr>
<tr>
<td>15</td>
</tr>
<tr>
<td>16</td>
</tr>
<tr>
<td>17</td>
</tr>
<tr>
<td>18</td>
</tr>
<tr>
<td>19</td>
</tr>
</tbody>
</table>
<table id="tableLista" class="divScrollDiv">
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
</tbody>
</table>
</body>
</html>共有1个答案
洪育
您需要某种锁定来防止在循环中触发滚动。简单的基元锁可以跟踪您正在悬停的表，并且只触发该元素的同步。
var scrollSource;
var setScrollSource = function() {
scrollSource = this;
}
target.hover(setScrollSource);
target1.hover(setScrollSource);
target.scroll(function (e) {
if (this !== scrollSource) {
return;
}
// sync logic
}
target1.scroll(function (e) {
if (this !== scrollSource) {
return;
}
// sync logic
}
(function () {
var target = $("#tableFixed");
var target1 = $("#tableLista");
var scrollSource;
var setScrollSource = function() {
scrollSource = this;
}
target.hover(setScrollSource);
target1.hover(setScrollSource);
target1.scroll(function (e) {
if (this !== scrollSource) {
return;
}
target
.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
e.preventDefault();
});
target.scroll(function (e) {
if (this !== scrollSource) {
return;
}
target1
.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
e.preventDefault();
});
})();.divScrollDiv {
display: inline-block;
width: 10%;
border: 1px solid black;
height: 100px;
overflow: scroll;
}
.tableNoScroll {
overflow: hidden;
overflow-y: scroll;
}<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<body>
<p>Scroll the left div, watch the right one.</p>
<table id="tableFixed" class="divScrollDiv tableNoScroll">
<tbody>
<tr>
<td>00</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
<tr>
<td>13</td>
</tr>
<tr>
<td>14</td>
</tr>
<tr>
<td>15</td>
</tr>
<tr>
<td>16</td>
</tr>
<tr>
<td>17</td>
</tr>
<tr>
<td>18</td>
</tr>
<tr>
<td>19</td>
</tr>
</tbody>
</table>
<table id="tableLista" class="divScrollDiv">
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
</tbody>
</table>
</body>
</html>
类似资料：
-
问题内容： 我想平稳地向下滚动。我不想为此写函数-特别是如果jQuery已经有一个函数。 问题答案： 您可以只使用该属性，如下所示：
-
我注意到，如果在ListView中Listitem的TextView中使用android:singleLine=“true”，则滚动会非常缓慢。虽然我找到了另一种android:maxLines=“1”，但我很好奇为什么android:singleLine=“true”会让滚动变得很慢，即使很慢，为什么android仍在使用它？
-
问题内容： 我有这个（包裹在）中，并有个。的内容是简单的HTML，其中包含使用img标签嵌入的某些图片（本地文件）。问题是，当您加载时，需要花一秒钟的时间来加载，然后在页面底部显示滚动条。如果我做： 它会暂时设置滚动条，然后出现另一个主题（大概负责加载图像）并将滚动条打回到底部。我尝试添加： 但这并没有解决。有没有办法从任一得到一个事件或当窗格完成加载，这样我可以设置滚动条，然后会通知我吗？另一种
-
我的问题：我的ListView中的一个项目在我开始滚动后会动画。它不是最后一项，动画应该完成。一旦问题消失，我滚动后，它只发生一次，并且只发生在列表中的单个项目上。 在我开始滚动ListView之后，如何停止单个项目的动画制作？ 我希望在将项目添加到适配器时，动画仅运行一次。 我有一个列表适配器，当项目添加到列表中时，我在其中对它们进行动画处理。我正在使用声明的动画器在适配器的getView（）方
-
描述 (Description) scrollTop( )方法获取第一个匹配元素的滚动顶部偏移量。 此方法适用于可见元素和隐藏元素。 语法 (Syntax) 以下是使用此方法的简单语法 - <i>selector</i>.scrollTop( ) 参数 (Parameters) 以下是此方法使用的所有参数的说明 - NA 例子 (Example) 以下是一个简单的例子，简单地显示了这种方法的用法
-
我有一个和一个,它由一个带有不同高度项的适配器支持。有没有办法告诉设置滚动位置，使项目X（或多或少）准确地出现在屏幕底部？