Php 如何调用基于滚动条单击的函数?
我正在使用带滚动条的Div。当用户单击滚动条时,我需要根据滚动条单击调用该功能。我如何才能进行调用Php 如何调用基于滚动条单击的函数?,php,jquery,html,Php,Jquery,Html,我正在使用带滚动条的Div。当用户单击滚动条时,我需要根据滚动条单击调用该功能。我如何才能进行调用 我在客户端使用Jquery,在服务器端使用PHP 我知道如何进行ajax调用等。我唯一想做的是,当在该分区中单击滚动条时,我需要进行此调用 是否可以在该分区中设置滚动条的ID。您可以绑定到滚动事件,当用户单击滚动条时不会触发该事件,但当滚动条出于任何原因移动时会触发该事件。: //wait for document.ready to fire, meaning the DOM is ready t
是否可以在该分区中设置滚动条的ID。您可以绑定到
滚动
事件,当用户单击滚动条时不会触发该事件,但当滚动条出于任何原因移动时会触发该事件。:
//wait for document.ready to fire, meaning the DOM is ready to be manipulated
$(function () {
//bind an event handler to the `scroll` event for your div element
$('#my-scroll-div').on('scroll.test-scroll', function () {
//you can do your AJAX call in here, I would set a flag to only allow it to run once, because the `scroll` event fires A LOT when scrolling occurs
});
});
请注意,.on()
在jQuery 1.7中是新的,在本例中与使用.bind()
相同
要像我上面建议的那样设置标志:
$(function () {
var AJAX_flag = true;
$('#my-scroll-div').on('scroll.test-scroll', function () {
if (AJAX_flag === true) {
AJAX_flag = false;
$(this).off('scroll.test-scroll');
$.ajax({...});
}
});
});
更新
向动态创建的元素添加事件处理程序的最佳解决方案是在将它们添加到DOM之前绑定它们:
function scroll_func () {
var AJAX_flag = true;
$(this).on('scroll.test-scroll', function () {
if (AJAX_flag === true) {
AJAX_flag = false;
$(this).off('scroll.test-scroll');//unbind the event handler since we're done with it
$.ajax({...});
}
});
}
$.ajax({
...
success : function (data) {
//note that this selector will have to change to find the proper elements for you, if you are unsure how to select, start by seeing what data is by doing a `console.log(data);`
$(data).find('#my-scroll-div').on('scroll', scroll_func).appendTo('#container-element');
}
});
但是你必须小心这个解决方案。正如他所说,当滚动条出于任何原因移动时,它会被触发。这也意味着当滚动是由JavaScript启动的,或者不是使用滚动条本身,而是使用滚动箭头或向上翻页、向下翻页键时。这是一个重新迭代的好时机,我在回答中加粗了文字。@Jasper@Sven Bieder Hi friends谢谢你的帮助。当我创建示例页面时,它会调用。但我正在用ajax加载内容。当时甚至我滚动了滚动条,它也不会调用。我也使用了
live
。但它不起作用。有什么想法吗?@svk我用一个如何绑定到元素的示例更新了我的回答在将它们添加到DOM之前。@Jasper我稍微更改了您的代码并开始工作。我所做的更改是$(“#容器元素”).append(数据)。find(“#我的滚动div”)。on('scroll',scroll#func)代码>