文章/答案/技术大牛

发布

js文字左右无缝滚动

基础概念

JavaScript文字左右无缝滚动是一种网页动画效果，通过JavaScript控制文字或元素在页面上从左到右（或从右到左）连续滚动，形成一种无缝衔接的视觉效果。

类型

单行滚动：文字在一行内循环滚动。
多行滚动：多行文字依次向下或向上滚动。
自定义路径滚动：文字可以沿着设定的路径移动。

应用场景

新闻网站：实时更新的新闻标题滚动显示。
广告横幅：促销信息的动态展示。
导航菜单：动态导航链接，提升交互性。

示例代码（单行文字左右无缝滚动）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字无缝滚动</title>
<style>
    #scrollDiv {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
    }
    #scrollContent {
        display: inline-block;
        animation: scroll 10s linear infinite;
    }
    @keyframes scroll {
        0% { transform: translateX(100%); }
        100% { transform: translateX(-100%); }
    }
</style>
</head>
<body>

<div id="scrollDiv">
    <div id="scrollContent">这是一段滚动的文字示例，用于展示无缝滚动效果。</div>
</div>

<script>
    // 动态复制内容以实现无缝滚动
    var content = document.getElementById('scrollContent');
    content.innerHTML += ' ' + content.innerHTML;
</script>

</body>
</html>

常见问题及解决方法

问题1：滚动速度过快或过慢

原因：动画时间设置不当。 解决方法：调整CSS中的animation-duration值。

问题2：滚动出现卡顿

原因：页面其他元素或脚本影响性能。 解决方法：

确保页面简洁，减少不必要的DOM操作。
使用requestAnimationFrame优化动画性能。

问题3：无法实现无缝滚动

原因：内容复制不正确或动画关键帧设置错误。 解决方法：

确保内容被正确复制并拼接。
检查并修正CSS动画的关键帧设置。

通过以上方法，可以有效解决JavaScript文字左右无缝滚动中遇到的常见问题，确保滚动效果的流畅性和美观性。

页面内容是否对你有帮助？

有帮助

没帮助

图片上方的文字，左右滚动

html、css、image、text、rollover

我试图创建一个滚动效果图像与CSS。图像开始只是一个标题覆盖，然后当悬停在一个文本覆盖出现。我很高兴它是如何进行到目前为止，除了文本区域的顶部，文字跑向右边。你也可以上下滚动，但我假设这是同样的问题？

浏览 1提问于2016-07-25得票数 1

回答已采纳

1回答

为什么在mViewPager.setCurrentItem(值)处传递的值在FragmentStatePagerAdapter的getItem(int值)方法中增加或减少

android、android-viewpager、navigation-drawer

我在我的应用程序中使用了NagivationDrawer和ViewPager。当用户在抽屉中选择一个项目时，视图寻呼机将相应地设置该片段。.... public void onNavigationDrawerItemSelected(int position) { Log.d("POSITION ItemSelected", po

浏览 3提问于2015-11-01得票数 0

回答已采纳

3回答

Xcode UITextView仍然没有使用故事板滚动

objective-c、xcode、textview

我试图在我的UITextView中启动一个滚动视图，即使我似乎已经选择了适当的框，但我似乎无法使滚动工作。我经历过许多类似的问题，但似乎都没有答案。我在下面包含了Xcode的图片：问题2:当我向下滚动我的大部分文字显示，但滚动停止了两个左右的句子，我必须向下滚动，并保持在那里阅读。我能解决这个问题吗?这样它就会一直滚动到文本的底部？

浏览 8提问于2014-06-16得票数 0

回答已采纳

3回答

滚动后的动画标题导航收缩

javascript、html、css

我将此回购用于动画标题：唯一的问题是，它缩小了300像素左右的滚动，因为我需要它的活动后，滚动到150 at左右。在那里，js中的两个值，我大大地减少了，但是没有什么区别。有人能告诉我怎么改吗？

浏览 4提问于2015-06-02得票数 0

回答已采纳

3回答

触摸板上的两指滚动js

javascript、jquery、touchpad

我们已经开发了一个网站，其中with具有水平方向，并希望实现触摸板控制与两个手指左右移动。如何使用js或jQuery将触摸板控件从上/下移动到左/右，以向左/右滚动站点页面？

浏览 10提问于2012-04-02得票数 5

1回答

一个终端机总是可以滚动还是永远像更少？

terminal、less、scrolling

有没有办法让我的终端总是像传递给更少，但没有(结束)的“功能”，要求我退出之前，我键入更多的文字。很明显，当输出超过当前视口的宽度和高度时，是否存在检测能力，是否有人知道如何将其合并到终端本身？

浏览 0提问于2014-06-04得票数 1

回答已采纳

3回答

带有CSS的无限滚动文本

javascript、html、css、animation

在我的HTML页面上，我需要有一行文字，在页面上滚动“无限”。有点像一个纸带，但同样的文字开始滚动到它的末端，w/o是一个缺口。我尝试过使用动画: marquee CSS样式，我可以获得文本滚动，然后跳回，然后再滚动，但这不是我所需要的。这是可能的CSS吗？如果有可行的解决方案，JS就可以了。

浏览 5提问于2017-08-30得票数 0

回答已采纳

5回答

如何创建动画滚动箭头动画

jquery、html、css、animation

我想做一个像那样的滚动按钮我已经研究过他们的代码，我可以理解的CSS，但有一个JS问题，我无法理解。你能弄清楚我怎样才能使它像这样的滚动效果。modules/AnimatedArrowButton" data-contact-butto

浏览 6提问于2017-01-09得票数 13

回答已采纳

1回答

是否可以使用java.awt.Robot进行水平mouseWheel滚动？

java、scroll、mouse、awt、mousewheel

我可以使用java.awt.Robot中的mouseWheel()来模拟垂直的鼠标滚轮滚动。在OS上，我有一个可以水平滚动的超级鼠标。有没有什么办法可以用java.awt.Robot来模拟呢？只显示垂直滚动。

浏览 4提问于2012-02-23得票数 2

1回答

使用鼠标滚轮进行水平滚动

javascript、scrollbar

JS允许我使用鼠标滚轮水平滚动，但我希望以百分比(例如50%左右)滚动，或者滚动到上一项或下一项。

浏览 4提问于2015-02-03得票数 0

2回答

UITextfield内容偏移量上的UIView.animateWithDuration :它剪辑文本(Swift)

animation、swift、uitextview

因此，我看到了一段时间的空白，然后剩下的文字进入动画。还有:一旦动画完成，当我向上滚动的时候，所有的文本都是可见的。我在不同的超级视图中尝试过多个UITextviews。一般的想法是一种学分，如动画，所有的文字都在30秒左右缓慢地向上移动。

浏览 5提问于2015-01-12得票数 3

回答已采纳

3回答

用window.scrollY在滚动页上控制HTML元素的样式

javascript、html、css

当使用window.addEventListener(“滚动”、函数(){})和window.scrollY值滚动时，我试图更改div元素的字体大小和边距底部。但如果我不停止滚动，我不希望它永远改变。我只想把字体大小从256 to减少到192 to左右，边距底部减少到128 to左右。你们能告诉我怎么控制它吗？抱歉，我刚开始JS几天。下面是我代码的一部分。

浏览 9提问于2022-06-21得票数 0

回答已采纳

1回答

如何使此插件与jQuery移动版协同工作？

jquery、jquery-mobile、page-init

我有一个滚动条插件，只有当我刷新页面时才能工作，我正试图让它无缝地工作。我用这个来引用它：整个插件(iscroll.js

浏览 0提问于2012-12-17得票数 0

3回答

fullPage.js & Fancybox多键盘卷轴

jquery、fancybox、fullpage.js

我试图保留fullPage.js和fancbox.js插件的默认键滚动功能。因此，我希望两个脚本都启用左右两种功能。但是，我希望在fancybox打开时禁用fullPage.js上的关键滚动功能(例如，当覆盖打开和图像缩放时)。其目标是允许用户在fancybox打开而不是在覆盖层下方的“幻灯片”之间切换时，在图片库图像之间左右滚动。

浏览 1提问于2014-03-27得票数 4

回答已采纳

1回答

当达到n%Bottom时如何禁用滚动？

javascript、reactjs、events

当它在底部达到80%时，我们如何禁用滚动？我从下面的代码启动了禁用滚动功能，但它在iPhone中不起作用。;}, []); 有没有一种js/CSS的方式或包可以检测滚动百分比？并在达到80%左右的底部时禁用它(但可以再次向上滚动)？

浏览 2提问于2021-09-27得票数 1

3回答

全方位连续、循环、可滚动的内容

javascript、jquery、css

我已经看到了一个非常好的效果，我想尝试在我自己的项目中重现，但我正在努力寻找实现它的最佳方法，无论是在性能方面还是在无缝操作方面。其效果是连续/循环的内容，可以无休止地向任何方向滚动和平移，并且看起来完全无缝。这可以在安卓获奖的Leap:Second网站上看到：。假设用户连续向下滚动了5分钟，只是为了好玩，然后克隆了10,000次--克隆这么多内容有什么缺点？ background-p

浏览 1提问于2016-07-14得票数 5

1回答

HTML5 5-画布活动框架，用于快速、健壮、简单的使用

javascript、html、canvas

访问者应该能够左右滚动沿火车，并点击窗口显示不同的内容(在弹出或独立窗口)。我对画布很陌生，但对HTML、CSS和javascript/jQuery感觉很舒服，所以我相信我可以尝试一下。

浏览 9提问于2017-11-23得票数 0

1回答

GWT中的无缝/圆柱字幕

javascript、jquery、gwt、marquee

我正在做一个GWT项目，并试图在我的页面中添加一个滚动滚动条(选框)。b.然而，这似乎不支持许多在博客帖子上发表评论的人所要求的无缝/无限/系统字幕，但博客所有者似乎没有时间解决它。我们将非常感谢

浏览 0提问于2012-02-13得票数 0

回答已采纳

6回答

使用jQuery恢复页面滚动位置

jquery

有时，如果用户向下滚动页面，此操作会产生向上滚动页面的副作用，这是可以理解的。但是替换版本对用户来说似乎是无缝的，所以不得不再次向下滚动是有点恼人的。现在，由于我发现执行：从JS调试器控制台做了我希望它做的事情，我认为简单的补救措施是： var scrollsave = $('body').scrollTop

浏览 1提问于2010-01-06得票数 38

回答已采纳

2回答