Tag: 滚动

建立一个旋转木马。 Chrome和Firefox的性能不佳: 我以前问过这个问题，但我得到的唯一答案是这个链接：shouldiuseacarousel.com。我知道旋转木马对用户体验几乎没有什么作用，并且基本上没有价值，但这不是这里的情况。我正在使用的旋转木马是一个在线杂志的隐喻，可以提供在真实杂志中浏览页面的体验。因此非常相关。在创建这个旋转木马时，我的最终目标是实现平滑的滚动体验，同时仍然保持旋转木马的某些核心function。请记住，我是一个只有几个月的javascript经验的javascript学习者，并且欢迎任何关于优化或想法的建议，并且非常感谢。所以，我创建了一个带有一个名为“Carousel_Container”的简单div容器的旋转木马，其中css属性为“overflow：scroll;”。嵌套在里面是另一个名为“Carousel”的容器，它容纳我所有的“杂志标题”或“项目”。用户可以通过加载单击项目和杂志文章。到目前为止，我已经创建了两个核心function：1）当用户滚动时，我希望中间的项目脱颖而出。所以所有项目都有css“不透明度：0.3;” 除了中间的项目。这是我解决这个问题的逻辑：我创建了一个名为“Focus_Point”的变量，它由以下内容定义： var Focus_Point = Window_Width * 0.5; 这用于称为“ItemToFocus”的核心函数： var ItemToFocus = function(){ if( MousewheelActive == 1 ){ First_Item_Offset = $Active_Carousel_Item.first().offset().left; First_Item_Offset = -First_Item_Offset; Focus_Point = 0.45 * Window_Width; Carousel_Position = First_Item_Offset + Focus_Point; Width = $Item.first().width(); Length = $Active_Carousel_Item.length; for( i=0; i […]

Javascript / Jquery：确定用户是否使用鼠标滚轮或滚动条或键盘滚动: 我正在尝试让用户界面工作，如果他们使用鼠标滚轮，我需要让它滚动一个方向，如果他们使用滚动条，我需要另一种方式，如果他们使用键盘，则需要另一种方式。我相信滚轮和滚动条都可以作为鼠标事件，但是当点击滚动条时我无法使javascript工作。

jquery scrolltop（）返回上一个滚动位置的值: 我使用jquery函数element.scrollTop()来使用以下行获取页面的当前滚动位置： var currentScrollPosition= $(‘html’).scrollTop() || $(‘body’).scrollTop(); 但它总是返回前一个滚动位置的值。请检查下面的代码（与此处的代码相同）。正如您可以尝试自己并在代码中看到的，在每个小滚动之后，我们得到以下一系列值：（1：代码首次运行时尚无动作）增量：0 cumulativeDelta：0 functionCallCount：0 currentScrollPosition：0 （delta给出滚动多少，cumulativeDelta给出滚动总量，functionCallCount是滚动的次数，currentScrollPosition是scrolltop（）返回的值）（2：滚动一点时）三角洲：-120 cumulativeDelta：-120 functionCallCount：1 currentScrollPosition：0 （请注意，currentScrollPosition仍未更新）（3：进一步滚动时）三角洲：-120 cumulativeDelta：-240 functionCallCount：2 currentScrollPosition：90.90908893868948 （这里，cumulativeDelta，是目前为止所做的总滚动的加法，加倍，并且currentScrollPosition首次更新）（4：滚动时多一点）三角洲：-120 cumulativeDelta：-360 functionCallCount：3 currentScrollPosition：181.81817787737896 （现在，cumulativeDelta增加了三倍，而currentScrollPosition增加了一倍。因此，这是两个滚动后的值，但是更新后3个滚动）我为长期问题道歉，但很难另有说法。我想知道为什么会发生这种情况，如果我应该以其他方式使用此函数，则可以使用此函数的任何替代方法。 document.addEventListener(“mousewheel”, MouseWheelHandler); var cumulativeDelta = 0, functionCallCount = 0; function MouseWheelHandler(e) { e = window.event || e; // ‘event’ with […]

向下滚动页面时多次更改背景颜色: 我正在研究这个项目，我正在使用视差滚动创建一个网站。它应该是一个长的寻呼机。当您向下滚动页面时，当您到达页面的每个新部分时，背景颜色应该会改变。我花了几天时间在网上搜索，也在这里搜索stackoverflow，但我没有找到任何可行的方式。我在堆栈上找到了这个脚本： var tStart = 100 // Start transition 100px from top , tEnd = 500 // End at 500px , cStart = [250, 195, 56] // Gold , cEnd = [179, 217, 112] // Lime , cDiff = [cEnd[0] – cStart[0], cEnd[1] – cStart[1], cEnd[1] – cStart[0]]; $(document).ready(function(){ $(document).scroll(function() { var […]

在overflow：none元素（jQuery）中自动滚动内容: 我在overflow：none元素中混合了内容（图像，文本）。现在，我想根据鼠标指针的位置在x / y轴上自动滚动该内容。溢出：auto不是一个选项，因为我不想在该元素中显示/使用滚动条。我找到了一个类似的脚本，但只有背景图片。有没有办法产生类似的效果，但移动div的整个内容？提前感谢您的回答！ Test jQuery Move Background with Mouse Move $(document).ready(function(){ var vH=$(‘#viewer’).height(); var vW=$(‘#viewer’).width(); var vT=$(‘#viewer’).offset().top; var vL=$(‘#viewer’).offset().left; $(‘#viewer’).mousemove(function(e){ var ypos=e.pageY-vT; var xpos=e.pageX-vL; var y=Math.round(ypos/vW*100); var x=Math.round(xpos/vH*100); $(‘#test’).val(x+’ , ‘+y); $(‘#viewer’).css({backgroundPosition: x+’% ‘+y+’%’}); }); }); Test Move Background on Mousemove:

如何使用jquery从内部滚动iframe？: 我正在使用一个生成iframe的shadowbox来显示页面上的产品详细信息。因为详细信息页面可能很长，所以客户端需要一个“更多”按钮来向下滚动页面（显然iframe右侧的滚动条是不够的）。这是为了让iframe滚动我试过的代码： $(document).ready(function() { $(“.moreButton img”).click(function() { scrollbottom(); }); }); function scrollbottom() { var x = 250; // this number is a temporary placeholder var t = 500; $(“iframe”).animate({ scrollTop: x }, t); } 我也尝试使用body而不是iframe，但无济于事。有任何想法吗？谢谢！

如何强制jquery终端保持相同的大小？: 我正在使用Jquery终端，它看起来很酷。我现在一直在寻找几个小时，当输入文本时，我找不到让控制台保持静止的方法。相反，对于我输入的每一行输入，控制台的大小都会增加。有没有人知道如何为终端保持恒定的大小，这是我错过的设置还是什么？我想要这样的东西。

仅限Chrome：使用固定位置滚动问题重叠滚动div: 根据这个答案Overlay divs on scroll我试图做同样的效果。当你滚动时，这些部分被叠加在同一个地方 – 一个堆叠在下一个上面。在Firefox上 – IE工作正常但在Chrome（最新版本 – 版本31.0.1650.63 m）上滚动时，下一张幻灯片开始播放该部分的内容，即重叠，正在被退回。逻辑：当下一张幻灯片/部分即将到来时，设置position:fixed; 到将重叠的部分。基础html //conten goes here with img etc. css： html, body { height: 100%; margin: 0; padding: 0; } body { overflow-x: hidden; } .section { position: relative; z-index: 5; background: #FFFFFF; } .section-fixed { z-index: 1; } .section-inner { […]

从右到左滚动文本效果: 我试图从右到左滚动文本（实际列出元素）。这是HTML代码 text 1 text 2 我的CSS #slider-txt { position:relative; width: 590px; } #slider-txt ul { list-style-type: none; position: absolute; margin: 0px; padding: 0px; } #slider-txt ul li { text-align: right; } 和jQuery var box = $(‘#slider-txt’); if (box.length == 0) { return; } var ul = box.find(‘ul’); var li = $(‘#slider-txt’).find(‘li’); var liWidth = […]

在keydown，使用jQuery按键后停止滚动: 在keydown，按下按键后我有一些滚动动作。所以这就是它的样子： $(document).keydown(function(e) { e.stopPropagation(); if (e.keyCode === 40) { // some scrolling actions in specifie div } else if (e.keyCode === 38) { // some scrolling actions in specifie div } }); Everithing工作得很好但是当我滚动时，用我的div按键也会整页滚动。有没有选项可以阻止这个身体滚动？