Tag: scroll

如何实现jScroll？: 我是JS和jQuery的初学者，所以请耐心等待。我试图使用JS创建一个动态列表，最后它的工作。现在我需要使用jScroll插件在我的列表中实现无限滚动概念。所以我研究了很多关于jScroll的内容，但我找不到我需要的任何教程。大多数教程都使用PHP语言，而在我的情况下，我使用简单的SELECT查询和LIMIT和OFFSET完成了我的服务器（ PHP ）代码，并返回了一个json 。这是我的jQuery / AJAX代码，它从数据库创建动态列表，它已经在工作： $.ajax({ url: “http://localhost/jwmws/index.php/jwm/search/msmall/”+keyword, //This is the current doc type: “GET”, error : function(jq, st, err) { alert(st + ” : ” + err); }, success: function(result){ //generate search result //float:left untuk hack design $(‘#search’).append(‘Search for : ‘ + keyword + […]

解释为什么scrollTop（）总是在这里返回0: 见http://codepen.io/anon/pen/NGqPNz CSS： html { height: 100%; overflow-y: hidden; } body { height: 100%; overflow-y: auto; } JS： $(‘body’).bind(“scroll”, function () { if ($(‘body’).scrollTop()) { console.log(‘triggered!’); } else { console.log($(‘body’).scrollTop()); } }); scroll事件在body元素上触发。滚动条位于body元素上，而不是html或window元素上。那么为什么document.body.scrollTop或$（’body’）。scrollTop（）返回0？有没有什么办法可以用这个来检测滚动条的位置，或者如果我想使用高度我会卡住：100％; 溢出：隐藏在html元素上？谢谢！

jQuery UI，Draggable，Droppable，Auto Scroll: 我有一组可放置的li元素，它们接受一个可拖动的图标。项目列表位于可滚动的div元素中。我在这里放了一个简单的例子： http ： //www.nerdydork.com/demos/dragscroll/ 我想知道在拖动可拖动元素时是否有一种方法可以自动滚动元素列表。例如，假设您处于中间位置，例如http://www.nerdydork.com/demos/dragscroll/#j 。当你接近div的顶部时，它将开始向上滚动，当你接近div的底部时，它将开始向下滚动。任何人都知道如何使用jQuery实现这一目标？ UPDATE 我越走越近了。我在容器div的上部和下部创建了固定div。将鼠标hover在其上时，使用http://plugins.jquery.com/project/aautoscroll启动自动滚动现在的问题是，当我将鼠标hover在下方区域时，它会使我在字母上的拖拽变得混乱。但这似乎只是较低的自动滚动区域的问题。要查看我正在谈论的错误，请观看以下简短video： http ： //screencast.com/t/JBFWzhPzGfz 请注意，当它自动向下滚动时，hover不会超过正确的字母。在video结束时，你可以看到，如果你将鼠标hover在列表的左边缘，那么它会以某种方式重置并且似乎再次起作用。

用滚动显示/隐藏div: 我知道标题不是最具描述性的，并且还有更多类似问题的主题，但我找不到任何答案。事实上，我得到了这么多，谢谢你们，所以，这就是我要做的。当页面滚动到某个位置（触发器）时，我想要显示一个DIV，由#othdiv标记。当您进一步向下滚动到标记为＃othdiv2的下一个位置（触发器）时，此DIV会消失。这感觉就像是一个非常简单的解决方案，但我无法弄明白。我已经尝试过条件if语句，复制代码，删除行，新变量……叹息……请帮忙。 $(document).ready(function() { $(“#dvid”).hide(); //hide your div initially var topOfOthDiv = $(“#othdiv”).offset().top; var topOfOthDiv2 = $(“#othdiv2”).offset().top; $(window).scroll(function() { if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div? $(“#dvid”).show(); //reached the desired point — show div } else if($(window).scrollTop() < topOfOthDiv) { //scrolled past the other div? $("#dvid").hide(); //reached the desired […]

滚动可拖动项目的内容时禁用jQuery拖动: 我通常不会提出这样的问题/答案，但我想我会这样做，因为我已经看过这个问题20多次了，而且没有一个答案确实有效。简而言之，问题是如果你有可滚动内容（ overflow: auto;在可拖动的jQuery项目内的任何地方，当你点击并拖动滚动条时，父可拖动容器随之拖动。所以，我花了一些时间来处理解。这是一个会出现此问题的html示例： Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. 初始化元素可拖动的典型方法是这样的： $(“.draggable”).draggable()

在子div中防止父滚动: 当我滚动到子div的底部时， body元素开始滚动。我怎么能阻止这个？我只希望当光标在它上面时滚动body 。示例： JsFiddle

如何在mousedown事件上连续滚动div？: 我有两个div和两个按钮：如何连续滚动’#items’直到用户释放按钮？我尝试使用jquery mousedown事件和动画function，但无法使其工作。 $(“#up”).mousedown(function(){ $(“#items”).animate({“top”: “+=10px”}, “fast”); }) 上面的代码只移动div一次。我希望在释放按钮之前实现连续动画。谢谢你的帮助！

通过滚动页面保持侧面导航固定: 我有一个客户网站 – www.stagecraft.co.uk，他们希望当您向下滚动页面时，租用页面（较长页面）上的导航仍然存在。我有一个快速前进（不是现场），位置固定，但这样做左侧导航约从窗口顶部200px左右。什么时候滚动时在窗口顶部得到它？提前致谢….

使用javascript或jquery进行水平滚动div onclick: 我花了最近两天为此寻找一个简单的javascript或jquery代码。我想使用javascript或jquery合并水平滚动div来显示我的Web组合的工作页面的图像和描述性文本。它的function非常类似于此处显示的滑动滑动滚动： http ： //www.dyn-web.com/code/scroll/demos.php#horiz不幸的是，代码许可证是40美元，我是一个破产学生。在加载页面时，将显示三个投资组合图像。额外的东西隐藏在右边的溢出中。单击左箭头（我可以创建），从右侧进入新的图像幻灯片。右箭头单击将其发送回溢出。我不想要滚动条，只需要箭头控制幻灯片。任何帮助深表感谢。谢谢。

jQuery simplemodal禁用滚动: 我在页面上滚动内容超过2000像素。如果用户单击div ，则会在simplemodal窗口中弹出滚动内容。现在我的客户端希望在模态窗口启动时使原始页面不可滚动。（当然模态应该仍然是可滚动的。）它甚至可能吗？编辑：我已经尝试过你的建议了。基本上它可以工作，但问题有点复杂： $(“.foReadMoreLink a”).click(function(){ if ($(‘#modalBox’).length == 0) $(‘body’).append(”) $(‘body’).css({‘overflow’:’hidden’}); $.post(‘jquery/loadarticle.php’,{id:$(this).attr(‘id’)},function(data){ $(‘#modalBox’).html(data).modal({overlayClose:’true’}); }) return false; }); 我在链接上使用return false，因此没有JavaScript的机器人和用户（是的，那是2％）可以打开文章。使用上面的代码它按预期工作，但在关闭模式后我必须返回滚动条但这段代码不起作用： $(“.foReadMoreLink a”).click(function(){ if ($(‘#modalBox’).length == 0) $(‘body’).append(”) $(‘body’).css({‘overflow’:’hidden’}); $.post(‘jquery/loadarticle.php’,{id:$(this).attr(‘id’)},function(data){ $(‘#modalBox’).html(data).modal({onClose:function(){$(‘body’).css({‘overflow’:’auto’})},overlayClose:’true’}); }) return false; });