jquery 上下滚动新闻

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。上下滚动新闻通常是指在一个网页中，通过滚动的方式展示新闻列表，当用户滚动到页面底部时，自动加载更多新闻内容。

类型

无限滚动：当用户滚动到页面底部时，自动加载更多内容。
固定位置滚动：新闻内容在一个固定位置的容器中上下滚动。

应用场景

新闻网站：展示最新的新闻内容，提供良好的用户体验。
社交媒体：展示用户动态或热门话题。
博客平台：展示最新的文章或评论。

示例代码

以下是一个简单的 jQuery 实现无限滚动的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 上下滚动新闻</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #news-container {
            height: 400px;
            overflow-y: scroll;
            border: 1px solid #ccc;
        }
        .news-item {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
    </style>
</head>
<body>
    <div id="news-container">
        <!-- 新闻内容将在这里动态加载 -->
    </div>

    <script>
        $(document).ready(function() {
            var newsCount = 0;
            var newsLimit = 10;

            function loadNews() {
                $.ajax({
                    url: 'https://api.example.com/news', // 替换为实际的 API 地址
                    method: 'GET',
                    data: { count: newsLimit, offset: newsCount },
                    success: function(data) {
                        $.each(data, function(index, item) {
                            $('#news-container').append('<div class="news-item">' + item.title + '</div>');
                        });
                        newsCount += newsLimit;
                    }
                });
            }

            loadNews();

            $(window).scroll(function() {
                if ($(window).scrollTop() + $(window).height() == $(document).height()) {
                    loadNews();
                }
            });
        });
    </script>
</body>
</html>

常见问题及解决方法

滚动加载不触发：
- 原因：可能是滚动事件绑定不正确，或者滚动容器的高度设置不正确。
- 解决方法：确保滚动事件正确绑定，并且滚动容器的高度设置正确。

加载内容重复：
- 原因：可能是加载逻辑没有正确处理分页或偏移量。
- 解决方法：确保每次加载内容时，偏移量正确增加，并且不会重复加载相同的内容。
性能问题：
- 原因：频繁的滚动事件触发可能导致性能问题。
- 解决方法：可以使用节流（throttle）或防抖（debounce）技术来优化滚动事件的处理。

通过以上示例代码和常见问题解决方法，你可以实现一个简单的 jQuery 上下滚动新闻功能，并解决一些常见的技术问题。

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

有帮助

没帮助

是否有将RSS提要显示为水平滚动文本的模块？

是否有类似于ScrollText模块从RSS中获取文本并将其显示为水平滚动文本？ ScrollText的目的是将节点标题中的文本显示为水平滚动文本。

浏览 0提问于2013-08-28得票数 -2

回答已采纳

1回答

水平布局的粘性导航

、、、

不过，我希望导航具有与完全相同的粘性效果，但不要在从顶部滚动时(我正在处理的站点根本不上下滚动)时坚持，我希望它在从左边滚动一个百分比后保持不变。有人知道使用现有jquery插件的某种解决方案或解决方案吗？这是：如果你从它加载的地方向左滚动，有一个小的新闻部分，但我希望导航保持在着陆部分的绝对位置，直到你从那里滚动，以免干扰新闻文本。

浏览 2提问于2014-01-12得票数 0

回答已采纳

2回答

或者jQuery技巧

、

查看谷歌新闻...当上下滚动页面时，请注意左侧的导航。对如何做到这一点有什么想法吗？jQuery和CSS能复制吗？

浏览 1提问于2010-10-19得票数 2

回答已采纳

4回答

带有jQuery的新闻栏

、

我需要用jQuery制作一个水平的“突发新闻”样式栏。我从服务器上选择新的(简单的部分)，我需要一些方法来让它们从左到右不断滚动。有什么jQuery插件可以帮我吗？谢谢

浏览 2提问于2009-08-06得票数 0

回答已采纳

1回答

uwp以编程方式上下滚动WebView

、、

我正在创建一个简单的新闻提要，用户可以打开一个see视图来查看新闻的细节，出于某种原因，我希望用户可以使用按钮来控制see视图的上下滚动，而不是使用滚动查看器，我已经创建了webview来显示详细信息，但不知道如何使用按钮上下滚动。

浏览 5提问于2017-07-28得票数 1

3回答

如何创建新闻滚动条

、、

我想要一个从右向左滚动的新闻滚动条，可以很容易地添加删除项目。经过研究，我注意到他们中的许多人是从上到下滚动的，而不是从右到左的。新闻滚动条的要点是很容易添加或删除项目，当您悬停时，滚动条会停止，然后在鼠标不在其上时重新开始。我刚找到liScroll - 看起来也很不错

浏览 0提问于2012-09-10得票数 10

回答已采纳

2回答

如何将当前的行移到屏幕的中间？

有时，当我在缓冲区顶部或底部的文本行上时，我希望移动缓冲区，以便当前行显示在屏幕的中间。我不想更改任何文本，只想更改文本缓冲区的视图，这样可以更容易地看到当前行。

浏览 8提问于2015-03-15得票数 2

回答已采纳

1回答

1.0.js从左到右滚动

、

我开发了新闻网站，我使用jquery.li-scroller.1.0.js查看我的突发新闻，但是这个脚本从右到左滚动新闻。我想从左到右滚动新闻，因为我使用阿拉伯语。剧本： settings = jQuery.extend({ return th

浏览 0提问于2012-08-24得票数 0

2回答

Jquery插件冲突

、、

我有一个滑块和新闻滚动条在我的主页上。[2]<script type="text/javascript" src="..js/jquery.superfish.js"></

浏览 1提问于2012-06-08得票数 1

2回答

除了Firefox3.5之外，多个jquery代码可以在每个浏览器中运行

、

// Stop the link click from doing its normal thing }); 第一个控制滚动新闻滚动条这3个文件都有单独的jquery文件与之关联，并按如下方式链接：(放在上面的jquery部分之前。第一个用于滑动切换，第二个用于新闻滚动条，第三个用于角落) <script src="../jquery/

浏览 4提问于2009-09-13得票数 0

回答已采纳

5回答

使简单网页的一部分具有自己的滚动条

、

我有一个部分的网页，我正在建设，是致力于新闻事件。目前只需输入如下内容。</td> News items 2</tr> 我希望有它，这样当有5个以上的事件列出，比方说，然后你可以使用滚动条来查看旧事件也就是说，新闻部分的高度将是固定的，但您可以在其中上下滚动以查看更新和更旧的新闻。你怎么才能做到最简单呢？

浏览 2提问于2013-01-17得票数 13

回答已采纳

1回答

新闻报价器在悬停后无法重新启动

、

我正在使用一个演示jquery新闻报价器。它工作得很好。当我在新闻滚动条上悬停时，它就会停止。但在此之后，它将不再滚动。

浏览 0提问于2013-02-12得票数 1

回答已采纳

1回答

延迟加载构件负载

、、、、

我正在用C#和MVC5建立一个新闻网站。我还使用MsSQL。在这个项目中，我把所有的东西都作为一个部分视图，当我需要的时候，我调用组件并将它放入需要的部分。(将组件绑定到db等部分)。其中之一是延迟从jquery加载。我怎么才能解决这个问题？编辑：；jquery.

浏览 3提问于2014-03-27得票数 0

回答已采纳

1回答

在EditText (或android.support.v7.widget.AppCompatEditText)视图在RecyclerView中回收后，长时间按坏

、、

错误摘要第一台EditText长篇新闻。EditText中的所有文本都不会被选中。将不会

浏览 2提问于2019-02-22得票数 3

回答已采纳

1回答

我有一个一页的网站，滚动到正确的部分，当它点击导航链接-请参阅的现场例子。我现在正在扩展网站并添加一个位于子目录中的博客，我正在尝试设置博客导航来加载www.cleanupbritain.org，然后滚动到正确的部分。这个是可能的吗？我是jQuery的新手，因此任何帮助都将不胜感激。-- ScrollTo for navigation scrolling -->jQuery(window).load(funct

浏览 2提问于2011-09-10得票数 1

4回答

jquery:如何循环div

、、、

使用jquery，我如何能连续自动滚动div？就像这个网站的新闻和专题部分：。而且，当你将鼠标悬停在滑块上时，它会停止滚动，直到你离开为止。有没有能做到这一点的jquery插件？

浏览 0提问于2012-04-19得票数 3

2回答

Google AMP脚本与jquery window.scroll冲突

、

我正在尝试遵循谷歌()建议的AMP指南，但是一旦我添加了他们的js脚本，jQuery滚动就停止工作了有人知道为什么和如何修复它吗？

浏览 2提问于2016-02-05得票数 4

1回答

JavaScript中的水平新闻滚动条

、、

我想我可能已经浏览了上百个网站，但我似乎没有找到适合我的网站的完美的横向新闻滚动条。我的要求是： 1)必须平滑2)必须从浏览器的右端滚动到左端(意味着100%宽度) 3)必须是连续的(意味着新闻项目-1必须紧跟在最后一个新闻项目之后) 4)必须重量轻。5)必须在鼠标悬停时暂停。此外，我必须等待100%的空格滚动，才能在最后一个新闻项之后看到news-item-1 )。我真的更喜欢它是在jQuery中，因为我的其他脚本使用jQuery，

浏览 1提问于2010-10-25得票数 1

4回答

ios 7:有没有人能推荐我实现新闻提要类型的滚动？

在这里，我必须完成一项任务，比如在其他社交媒体应用程序(如Facebook，Twitter )中提供新闻。提前感谢

浏览 2提问于2014-08-14得票数 1

1回答

使用css3和jquery动画滑入滑出

、、

我试图实现一个幻灯片进和滑出的效果，就像垂直新闻滚动条在这个网站 .slidein{ animation:slide 1799ms linear; top:0px; -webkit-animation0%{ top:-100px;}}{100%{ top:0px;}Jqueryprepend('<div class="newdiv slidein"><

浏览 1提问于2013-08-01得票数 0

点击加载更多