0

我正在尝试为模仿Sublime 文本编辑器的右侧 miniview的演讲构建 Javascript UI 。将一些文本加载到主 div 后，我将该文本克隆到右侧更窄的 div 中，并将 and 设置font-size为line-height非常小的值。

这是使用旧国情咨文地址的 jsFiddle 工作演示：http: //jsfiddle.net/chriswilsondc/NYSSa/

如您所料，黄色 div 动态调整大小以表示左侧视图中文本的可见部分。然后，我将一个拖动事件附加到那个模仿左侧窗格中滚动条行为的黄色框。我需要这些左侧滚动条的本机功能来绑定到右侧框的拖动行为。我正在使用 YUIdrag模块，尽管我的问题更笼统（我认为）。

现在，这是一个简单（如果草率）的问题，即在激活另一侧时手动移动另一侧。

//right-hand side
dd.on("drag:drag", function(e) {
    console.log("dragged", e);
    var percentScrolled = Y.one("#pane").get('offsetTop') / ht_aer;
    //scroll the left side
    Y.one("#text").set("scrollTop", percentScrolled * ht_text_comp);
    //parallax scrolling of small-text version
    Y.one(".aerial .complete").setStyle("top", -ht_aer_comp * percentScrolled);
});


//left-hand side
Y.one("#text").on("scroll", function(e) {
    console.log("scrolled", e);
    var percentScrolled = e.currentTarget.get('scrollTop') / ht_text_comp;
    //parallax scrolling of small-text version
    Y.one(".aerial .complete").setStyle("top", -ht_aer_comp * percentScrolled);
    //manual drag 
    Y.one("#pane").setStyle('top', ht_aer * percentScrolled);
});

但是，如果您查看控制台日志，您会看到有一个适得其反的事件：通过拖动 div 以编程方式更改滚动条会导致触发“滚动”事件，从而尝试以编程方式触发我们最初使用鼠标调用的拖动事件。我有点惊讶它不会无限触发。这似乎不明智。

有没有办法只在手动操作调用事件时触发事件？还是将这两个不同事件联系起来的更好方法？如果解决方案不使用 YUI，我不介意——这只是我习惯的框架。谢谢。

4

2 回答 2

1

在您的滚动事件处理程序中，您不会触发拖动事件。您只需设置不会触发拖动事件的 div 位置。因此，没有机会循环事件处理程序。

当用户拖动 div 时，拖动处理程序为编辑器设置 scrollTop 值。请注意，仅当 scrollTop 值真正更改时，此操作才会触发滚动事件。如果 scrollTop 的整数值与之前完全相同，则不会触发滚动事件。因此，即使您在滚动事件发生时实际触发了拖动事件，也不会出现循环。

这种行为没有害处。这是自然的。

于 2013-06-02T08:07:57.120 回答
0

@Riateche 解释了为什么它不会创建无限循环的事件。但是您可能仍然希望在拖动过程中不要触发滚动事件以避免潜在的视觉故障。所以基本上这个想法是在你开始拖动时停止收听滚动事件，并在完成拖动后继续收听它。

在 YUI 中，您可以使用drag:start 和drag:end事件。像这样的东西：

function scrollHandler() {
  // ...
}

var scrollNode = Y.one('#foo');
scrollNode.on('scroll', scrollHandler);

dd.on('drag:start', function () {
  scrollNode.detach('scroll', scrollHandler);
});

dd.on('drag:end', function () {
  scrollNode.on('scroll', scrollHandler);
});
于 2013-06-07T12:43:11.423 回答