Javascript在div上自动滚动
JavaScript在div上实现自动滚动的方法有多种，以下是其中一种常见的实现方式：
- 使用CSS动画实现自动滚动：
- 概念：CSS动画是一种通过在元素上应用动画效果来实现动态效果的技术。
- 分类：CSS动画可以分为过渡动画和关键帧动画两种类型。
- 优势：使用CSS动画可以实现平滑的滚动效果，且不需要编写复杂的JavaScript代码。
- 应用场景：适用于需要简单的自动滚动效果的场景。
- 示例代码：
- 示例代码：
- 使用JavaScript定时器实现自动滚动：
- 概念：JavaScript定时器是一种用于在指定时间间隔内重复执行代码的机制。
- 分类：常用的定时器函数有
setInterval和setTimeout。 - 优势：使用JavaScript定时器可以更加灵活地控制滚动效果，可以实现更复杂的滚动逻辑。
- 应用场景：适用于需要自定义滚动逻辑的场景。
- 示例代码：
- 示例代码：
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发平台（MTP）：https://cloud.tencent.com/product/mtp
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云虚拟专用网络（VPC）：https://cloud.tencent.com/product/vpc
相关·内容
5回答
如何显示附加jquery的元素
javascript、jquery
我正在用html、css和javascript制作一个聊天应用，比如google hangout或snapchat。当我想附加聊天时，我使用
$(id_name).after(message)
我可以附加消息，但我想知道的是，如果没有手动滚动，消息就不会显示在屏幕上。如何显示我自动附加的消息？请帮帮我。
下面是我的代码。
<div class="bubble" style="clear:both" id="talk_chat_from">
<div id="talk_chat_detail"><
浏览 2提问于2017-09-13得票数 0
回答已采纳
2回答
将水平滚动指示器添加到DIV中
javascript、html、jquery、css、slider
我想显示一个可滚动的DIV容器的水平滚动指示器。
经过一些测试，我很确定这是不可能的纯CSS。我在里发现了一个片段。不幸的是，我不知道如何将脚本更改为我的需要。
我使用的是一个简单的DIV容器，其中包含一些元素。这是我的密码：
<div class="container">
<div class="scroll-wrapper">
<div class="scroll-container">
<ul class="list-inline text-w
浏览 5提问于2021-01-18得票数 0
回答已采纳
2回答
javascript -当元素位于viewport顶部时如何启动更新滚动百分比
javascript、html、css、reactjs
当您进入网站时，这是您将看到的第一个UI。
然后，如果你向下滚动到B节的开头
我预计B部分将变得粘稠，如果滚动，currentPercentage状态将开始从0%逐渐增加。
当currentPercentage状态达到100%时，粘性效果将不再适用于sectionB，然后您可以向下滚动到C节或页面底部。
有点像主页
您可以尝试在此部分滚动。
我认为有几件事我们需要找到解决方案
当卷轴位置到达B节时如何使B节变粘
如何在到达B区时滚动并提高百分比
我试过用css和javascript的方式思考，仍然找不到解决方案
几天来，我也对这个问题做了很多
浏览 7提问于2022-01-08得票数 6
1回答
Javascript滚动Div循环
javascript、jquery、html
我让当前脚本正常工作，div滚动到底部并停留。我想让它在触底后重新开始。也许是通过循环？虽然我已经尝试了几种使用循环和延迟的技术，但都不能让它工作。当我确实尝试循环它时，它似乎使滚动条更快，并且不会重复？ 由于某种原因，JsFiddle没有动画：https://jsfiddle.net/tz4kjegf/8/ 代码如下： var scrollDistancePerSecond = 30; // Scroll 50px every second.
var scrollDistancePerAnimationFrame = Math.ceil(scrollDistancePerSecond
浏览 40提问于2019-10-16得票数 2
回答已采纳
1回答
无法将滚动条保持在底部
javascript、html
我有这样的代码：
<div id="conversationDiv" style="overflow:auto">
<label>What is your name?</label><input type="text" id="name" />
<button id="sendName" onclick="sendName();updateScroll();">Send</button>
<p i
浏览 3提问于2016-05-18得票数 0
回答已采纳
1回答
如何控制滚动聊天框
php、jquery、ajax、chat
我有一个AJAX聊天框，我想控制滚动框。
例如，当您发送新消息时，我让它由setInterval自动滚动
setInterval(function(){
$("#chattingbox").load("msgs.php");
$("#chattingbox").each( function()
{
var scrollHeight = Math.max(this.scrollHeight, this.clientHeight);
this.scrollTop = scrollHeight - this.clientH
浏览 2提问于2016-02-16得票数 0
3回答
使用jquery获取垂直滚动的最大值
javascript、jquery、javascript-events
这是我的视图代码，我使用了jquery，它工作了，我没有任何问题，直到我改变了屏幕分辨率，它停止工作。我知道问题出在哪里，但我解决不了，看看下面的代码：
@model PNUBOOKIR.Models.ProductModels
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="@Url.Content("~/Scripts/jquery.js")
浏览 1提问于2011-05-17得票数 12
回答已采纳
1回答
如何将绿色的div放在红色的下面？
javascript、jquery、html、css、debugging
下面的是完全表示实际代码的演示代码
我在红色div上放置了一些内容，希望用户在页面加载时看到这些内容。问题是我在这个页面上使用的是scrollmagic.js动画。一切都很完美，但是当我尝试使用平滑滚动时，滚动魔法的.setPin功能停止了工作。动画仍在工作，但红色div正在与其他div一起滚动。我希望红色div停留在它的地方，直到动画还没有完成。在动画完成之前，smoothscroll将红色的div沿其他div推送。
你能帮我把绿色和蓝色的div放在红色的下方，而红色的div的位置是固定的，并保持响应，这样所有的屏幕大小都能正常工作？
<!doctype html>
<
浏览 0提问于2020-01-09得票数 1
1回答
如何显示/隐藏基于滚动位置的导航条？
javascript
我正在寻找一个解决方案，应用滚动动画到我的肚脐。当我向下滚动或向上滚动时，我想用滚动动画隐藏/显示导航条。经过一些研究，我总是只找到以下的解决方案。
var lastScrollTop; // This Varibale will store the top position
navbar = document.getElementById('navbar'); // Get The NavBar
window.addEventListener('scroll',function(){
//on every scroll this funtion wi
浏览 3提问于2022-07-08得票数 1
回答已采纳
1回答
如何避免滚动条堆叠
html、css
我在一个HTML文件中有2个滚动条。滚动条a较短，滚动条b较大。当滚动条a中的滚动到达末尾时，滚动条b获得焦点并开始滚动。怎样才能避免这种影响呢？我希望当我将鼠标放在滚动条上时，只能由该滚动条a处理，而不是b。 document.getElementById('left').onmousewheel = function(e, d) {
if((this.scrollTop === (this.scrollHeight - this.offsetHeight) && d < 0)
|| (this.scrollTop === 0 &a
浏览 10提问于2019-06-04得票数 3
1回答
设置导航高亮显示的位置
javascript、functional-programming
我如何使我的功能更好，更喜欢函数式编程风格？
在这个单页的网站上，我有一个固定的导航列表.列表中的每个项目都有一个透明的背景，我有一个#nav-highlight div，在滚动页面时，我用JavaScript移动并用CSS动画以获得有趣的效果。
一切正常，但我对我的实现不满意。如果没有注释来解释它，有一个部分是没有意义的，我需要使用continue和break才能这样工作。我更倾向于使用函数式风格，但我不知道如何在没有for循环的情况下做到这一点。
这是相关的功能。您可以在上下文在GitHub中看到代码，并且页面托管为这里：
function setHighlightPosition(nav
浏览 0提问于2018-05-23得票数 3
回答已采纳
3回答
使用overflow Auto自动滚动到页面底部
javascript、jquery、vue.js、vue-component
我已经使用vue js创建了一个聊天应用程序。我使用overflow: auto作为我的div。我想要的是自动滚动到div的底部，这样用户就不再单击滚动来查看最新的消息。我的代码不工作，并且在控制台中没有显示任何错误。任何帮助都将不胜感激。谢谢。
以下是代码
<template>
<div class="panel-block">
<div class="chat" v-if="chats.length != 0" id="myDiv">
<di
浏览 1提问于2018-02-01得票数 0
1回答
如何在网页中滚动溢出的div
java、css、selenium、scrollbar、overflow
有没有办法在网页中滚动div的滚动条？更准确地说，我正在尝试自动滚动instagram帖子的上下滚动，例如。但是，由于滚动条可能是使用CSS属性隐藏的，我可能无法检测到它，因为滚动条不是一个元素。
下面是滚动条的css样式(来自firebug)。
.-cx-PRIVATE-PostInfo__comments {
margin-left: -24px;
margin-right: -24px;
margin-top: -5px;
padding-left: 24px;
padding-right: 24px;
padding-top: 5px;
浏览 0提问于2015-11-02得票数 2
3回答
使用无限滚动调整滚动高度
javascript、reactjs
当'scroll‘在最底部时，函数getUsers ()被调用。如何设置滚动，使其不会到达滑块的末端，并调用getUsers ()函数。会有一个无限的滚动效果。我指的是像这样的滚动效果：。当滚动条到达底部时，它会返回。
代码在这里：
import './style.css';
import axios from 'axios';
class App extends Component {
constructor() {
super();
this.state = {
users: [],
page: 1
浏览 16提问于2019-08-11得票数 2
回答已采纳
1回答
jquery: AJAX加载后滚动到底部
jquery、ajax
我正在开发一个消息应用程序，我用AJAX将对话导入到页面中，所以我试图找到一种方法，在页面加载时将div滚动到最底层。重要的是，div只在第一次加载时滚动到底部，不应该在刷新计时器上滚动到底部。
在#convo的内容最初加载到之后，div应该滚动到底部。我正在尝试使用$("#convo").scrollTop($("#convo")[0].scrollHeight());，但是没有任何错误--解决方案根本不起作用。你对如何完成这项任务有什么建议吗？
const urlParams = new URLSearchParams(window.location
浏览 3提问于2021-09-27得票数 0
2回答
SmoothScroll nav不适用于bootstrap 4
javascript、html、css、navbar、smooth-scrolling
我使用bootstrap 4已经有一段时间了。我看到了许多解释为什么平滑滚动应该工作，但我仍然看不到它！
也许有人能解释一下为什么它对我不起作用？或者我的代码出了什么问题？
太棒了，杰森
$(document).ready(function(){
let scroll_link = $('.scroll');
//smooth scrolling -----------------------
scroll_link.click(function(e){
e.preventDefault();
let url = $('body&
浏览 0提问于2019-02-15得票数 2
1回答
用Javascript/JQuery实现HTML表格的程序化滚动
javascript、jquery、html、css、html-table
我做了大量的谷歌搜索，并在堆栈溢出和其他网站上实现了许多解决方案，但无法让我的表格在程序控制下滚动。
我正在实现一个用于绘图的变量名称滚动表。我有200+变量，所以我希望用户能够输入变量名称的一些片段，并通过滚动在列表中显示该变量。我有这一切工作，除了滚动部分。
这是一个表格的样子：
这是定义表的HTML：
<div id="ySeriesParamChooser" class="ParamChooser">
<table id="yparamtable" cellspacing="0" border=&#
浏览 3提问于2016-01-30得票数 1
1回答
为什么我使用javascript来制作选框效果，它在运行时会抖动？
javascript、css
我对使用JavaScript的字幕效果有一些问题。滚动时应该停在中间，但目前不能停在中间，会产生抖动的效果。我该如何解决这个问题呢？ 我自己解决这个问题已经很长时间了，所以我来问大家，谢谢 function slideLine(box,stf,delay,speed,h)
{
var slideBox = document.getElementById(box);
var delay = delay||1000,speed = speed||20,h = h||20;
var tid = null,pause = false;
var s = function(){ti
浏览 9提问于2021-11-16得票数 1
回答已采纳
4回答
实时数据馈送和滚动条位置
javascript、jquery、css、ajax、html
我从MySQL数据库中检索数据，并使用在网站上显示数据。到目前为止，一切都如期而至，但我希望在固定高度的div中显示数据，并将滚动条修复到该div的底部，即总是首先显示最新的提要结果。
现在，当我加载页面时，滚动条是固定在顶部的。
我尝试过这个建议，，但它似乎行不通。是因为我使用实时数据和AJAX请求来填充div吗？
到目前为止，我的绳索是；
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/lib
浏览 10提问于2017-08-16得票数 3
回答已采纳
1回答
除非用户滚动起来，否则JQuery -滚动并锚定到ajax驱动div的底部。
javascript、jquery、html、ajax
我正试图滚动到div #chat-feed的底部，溢出设置为auto并保持在那里，除非用户滚动该div的内容。如果它们向下滚动，div应该锁定到底部，新内容将显示在底部。
已知的问题:我尝试过用我的代码实现，但我对Javascript还不太了解，无法让它正常工作。如果来自chat-feed.php的内容比容器高，那么滚动页就停留在顶部。似乎给出的答案也不尊重从外部文件加载的内容。
关键是:新内容应该显示在底部，在加载新内容时，div应该滚动到底部，除非用户已经滚动了一点。如果用户向下滚动，那么它应该锁定在底部，新内容显示在底部，并且是可见的。
<div id="chat-feed
浏览 1提问于2017-03-05得票数 6
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
