Tag: 滚动

触摸滚动Jquery插件 – 如何针对多个实例使用不同的选项进行初始化？: 在这里找到 – https://github.com/neave/touch-scroll ： (function($) { // Define default scroll settings var defaults = { y: 0, scrollHeight: 0, elastic: !navigator.userAgent.match(/android/i), momentum: true, elasticDamp: 0.6, elasticTime: 50, reboundTime: 400, momentumDamp: 0.9, momentumTime: 300, iPadMomentumDamp: 0.95, iPadMomentumTime: 1200, touchTags: [‘select’, ‘input’, ‘textarea’] }; // Define methods var methods = { init: function(options) { return this.each(function() { […]

在下列情况下，如何获得Waypoints（Jquery插件）以进行无限滚动？: 我正在使用Waypoints Jquery插件： http ： //imakewebthings.github.com/jquery-waypoints/#documentation 我的问题是我想在到达航点时动态加载内容。最初，内容是动态加载的，然后我想要最后的航点…当到达航点时，我想在它前面加载更多内容，等等。结构体： /* {messages loaded here} */ /* #waypoint added after messages loaded via appendTo(‘.viewport-content’) */ viewport / viewport-content通过css形成可滚动区域。我在使用appendTo在初始消息加载后附加了航点，否则航路点位于顶部并被击中。但是，当我在加载初始消息后使用appendTo时，当我向下滚动时，我无法使其正常工作。这是关于航点的当前JS： var opts = { offset: ‘bottom-in-view’, context: ‘#central-pane .viewport-content’, }; $(‘#waypoint’).waypoint(function(event, direction) { alert(“You’ve hit my waypoint! ow!”); $(‘#messages’).append($loading); messagesLoad(); /* loads more messages via appendTo(‘#messages’) */ […]

点击时停止jquery TABS跳跃/向上滚动？: 我使用的引擎调用jquery tabs.js脚本来处理选项卡函数。问题是，只要标签位于页面顶部并且您单击链接，它们就会快速向下滚动到页面底部。我一直试图解决这个问题几个小时，所有的解决方案都指向类似的答案，但没有一个对我有用。 $.fn.tabs = function() { var selector = this; this.each(function() { var obj = $(this); $(obj.attr(‘href’)).hide(); $(obj).click(function() { $(selector).removeClass(‘selected’); $(selector).each(function(i, element) { $($(element).attr(‘href’)).hide(); }); $(this).addClass(‘selected’); $($(this).attr(‘href’)).fadeIn(); return false; e.preventDefault(); }); }); $(this).show(); $(this).first().click(); }; 根据我发现的建议修复，我将上面的一行更改为： $($(element).attr(‘href’)).fadeOut(1); 我也试过添加e.preventDefault（）; 返回假后; 但还是没有运气？！？我能够找到一个运行不同模板的网站，但那里不存在问题。我一直在使用Firefox并检查代码，试图找到他们是如何做到这一点的，但是经过几个小时的打击，我寻求你的智慧哦明智的！

水平滚动布局左/右：jQuery / CSS测验: 看来，我想要实现的目标几乎是不可能的。我试图创建一个依赖于jQuery的水平布局，但即使关闭Javascript也可以使用。我还希望保留最清晰的代码并保持其语义值。所以我想我正在寻找终极解决方案。 🙂 网络上最常见的水平布局是： http ： //www.queness.com/resources/html/scroll/horizontal.html – 这将是完美的（即使关闭JS也能正常工作）。我的问题是我需要让它“双向”工作（左右两侧带有“开始”项目）。效果应该类似于： http ： //steveandjacqs.com/网站（和编码后端）很棒，但没有JS它就无法使用，而且代码充满了黑客攻击。我的CSS： html,body { overflow: hidden; } .wrapper { position: relative; width: 100%; height: 100%; } .wrapper-cont { position: relative; width: 500%; height: 100%; margin-left: -200%; } #item-left { position: absolute: top: 0px; left: 0%; } #item-home { position: […]

用户交互后取消滚动: 当用户点击指向同一页面的链接时，我的网页会动画滚动。我想在用户尝试滚动时取消此动画（否则用户和浏览器正在争夺控制权） – 无论是使用鼠标滚轮，键盘还是滚动条（或任何其他方式 – 还有其他方式滚动？）。我设法在使用鼠标滚轮或键盘后取消动画，如何使用滚动条？以下是我的代码查找键盘的方式： $(document.documentElement).keydown( function (event) { if(event.keyCode == 38 || 40) stopScroll(); }); function stopScroll() { $(“html, body”).stop(true, false); } 我还尝试使用scroll()更优雅的方式，问题是scroll()捕获包括动画和自动滚动在内的所有内容。除了动画滚动之外，我想不出任何让它能够捕获所有滚动的方法。

使用jQuery选择具有数据属性的元素会为其父元素分配一个空ID: 这真是奇怪。如果我使用jQuery的.find()来查找在滚动事件期间具有数据属性的子元素，那么滚动页面将重复地向这些元素的父元素添加和删除ID。这很难描述，但这是一个可重现的测试用例： http ： //jsfiddle.net/8fouvx9p/ var groups = $(“.group”); $(window).bind(“scroll resize orientationchange”, function() { showGroup(); }); function showGroup() { $(groups).each(function() { var group = $(this), elements = $(group).find(“[data-animation]”); }); } Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test […]

iPhone和iPad滚动结束: 我正在制作一些带有无限滚动的jQuery跨浏览器库我工作得很好但在iPhone上（我想也在iPad上）而不是相等的值我有一些不成比例的值不匹配 ($(window).scrollTop() == ($(document).height() – $(window).height()) 我只是想达到滚动结束，之后我可以调用AJAX脚本，还要记住两个手指擦拭缩放后值的变化。

隐藏固定透明标题下的滚动内容，滚动背景: 让我们说我有一个背景图像，一个带有透明部分的固定标题图像，一个带有半透明背景的内容div和一个传统标题/内容/页脚布局中的动态高度。我想要实现的效果：在固定标题下滚动背景和内容（内容隐藏和背景显示）。我已经阅读了一些相关的主题，例如在透明标题下隐藏滚动内容等。但是它们也处理了背景也可以修复的情况。我的必须是可滚动的。我设法通过将相同的背景图像添加到标题图像div的包装div并在窗口滚动事件上使用jQuery .scrollTop()滚动它来获得我需要的东西。参考： jsbin示例参考： jsFiddle示例在所有名为Firefox的浏览器中，这种方法的问题都是非常糟糕的同步（有些滞后，撕裂）。澄清：内容的高度将是动态的。 10000px我刚刚选择了这个例子。我希望它经常达到，有时更多（AJAX提要），并且在某些页面上它可以接近0 。这就是我同步.height()的原因。请记住，底部的页脚div位于内容div下。我认为必须有更好的方法。有什么建议？

在滚动时使用css和jQuery创建模糊效果: 当用户使用css和jquery在浏览器窗口中上下滚动时，我试图创建模糊效果。这是我的代码。 HTML CSS .out { width: 100%; height: 800px; background: url(https://placekitten.com/1200/800) no-repeat; } .this-div-kills-browsers { height: 1000px; } jQuery的 var hideThatKitty = $(‘.out’).innerHeight(); $(window).on(‘scroll’, function () { hideThatKitty = hideThatKitty/$(‘.this-div-kills-browsers’).offset().top $(‘.inner’).css(‘background’, rgba(255, 255, 255, \”0’+hideThatKitty\’)); }); 演示小提琴我想要做的是增加和减少css规则背景的alpha值：当用户向上和向下滚动时使用jquery的rgba（），因此滚动会变得模糊。还是有另一种方法吗？请帮助我实现这一目标。