开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

左右滚动js代码

以下是一个实现左右滚动的简单 JavaScript 示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    #scrollContainer {
      width: 300px;
      overflow: hidden;
      white-space: nowrap;
    }

   .scrollItem {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin-right: 10px;
    }
  </style>
</head>

<body>
  <div id="scrollContainer">
    <div class="scrollItem">1</div>
    <div class="scrollItem">2</div>
    <div class="scrollItem">3</div>
    <div class="scrollItem">4</div>
    <div class="scrollItem">5</div>
  </div>

  <button onclick="scrollLeft()">向左滚动</button>
  <button onclick="scrollRight()">向右滚动</button>

  <script>
    const container = document.getElementById('scrollContainer');
    const containerWidth = container.offsetWidth;
    let scrollPos = 0;

    function scrollLeft() {
      scrollPos -= 50;
      if (scrollPos < - (container.scrollWidth - containerWidth)) {
        scrollPos = - (container.scrollWidth - containerWidth);
      }
      container.style.transform = `translateX(${scrollPos}px)`;
    }

    function scrollRight() {
      scrollPos += 50;
      if (scrollPos > 0) {
        scrollPos = 0;
      }
      container.style.transform = `translateX(${scrollPos}px)`;
    }
  </script>
</body>

</html>

基础概念：

这里利用了 CSS 的 transform 属性来实现元素的位移，通过对容器设置 translateX 的值来达到滚动的效果。
通过 JavaScript 监听按钮点击事件来改变滚动的位移量。

优势：

实现相对简单，不需要复杂的动画库。
可以灵活控制滚动的距离和速度。

应用场景：

图片轮播的缩略图展示。
横向菜单的滚动显示。
商品展示列表的横向滚动浏览。

如果遇到滚动不流畅或者滚动位置计算错误的问题，可能是以下原因：

计算滚动位置的逻辑有误，比如没有考虑到容器的宽度或者内容的宽度。
滚动的步长设置不合理，导致滚动效果不自然。

解决方法：

仔细检查计算滚动位置的公式和变量，确保其准确性。
根据实际需求调整滚动的步长和速度。

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

有帮助

没帮助

相关·内容

左右滚动公告代码和上下滚动公告代码

左右滚动上下滚动

4.8K2 0

html左右循环滚动代码,不间断循环滚动效果的实例代码(必看篇)

滚动测试 /** * @para obj 目标对象如:demo,deml1,demo2 中的”demo” 可任意，只要不重复 * * @para speed 滚动速度越大越慢 * * @para...direction 滚动方向包括:left,right,down,up * * @para objWidth 总可见区域宽度 * * @para objHeight 总可见区域高度 * * @para...filePath 存放滚动图片的路径 (如果是自动获取文件夹里的图片滚动) * * @para contentById 对某id为contentById下的内容进行滚动此滚动与filePath不能共存请注意...* * @para 用法实例 scrollObject(“res”,50,”up”,470,200,””,”resource”) 对contentById(resource)下内容进行滚动 * * @...=””) demo1.innerHTML=$(contentById).innerHTML; demo2.innerHTML=demo1.innerHTML; // 左右滚动 function LRStructure

4.8K2 0

左右滚动，带控制按钮

今天需要一个左右滚动图的js，从网上着了半天，修改调试了半天才弄好，于是就收藏了。...不过以后真得看看js了关键代码有注释：（红色部分是我加的注释） js，而且高度和宽度不能省去，这里还有问题，为何单元格是750这的div设置成800？...为了便于滚动我调试的–> 代码如下： var $ = function (id) { return “string” == typeof id ?

3.5K6 0

无缝循环滚动图片的JS代码

无缝循环滚动图片的JS代码，用来展示商品什么的最好了，图片URL可以自行替换，速度也可以自己调试。... 无缝滚动</

12.2K3 0

js无缝循环滚动图片示例代码

html代码 3 css代码 * { margin: 0; padding:...left; margin: 0; padding: 0; } #banner ul li img { width: 400px; height: 600px; } js...oUl.style.left = -oUl.offsetWidth/speed+'px'; } oUl.style.left = oUl.offsetLeft+speed+'px';//进行右横向滚动...//oUl.style.left = oUl.offsetLeft-2+'px';//进行左横向滚动 } //调用方法 var timer = setInterval(move,30)//速度

12.2K2 0

html图片左右无缝循环滚动示例

达到循环滚动的效果。右移也是同理。下面是代码实现和demo js.../jquery.min.js"> js/center.js"> <

10.7K2 0

JqGrid实现超长水平（左右）滚动条功能

这篇文章来跟大家说一下当列表中数据比较多时，如何实现水平（左右）滚动来确保能够查看完整的信息。字段较少情况在字段较少的情况，直接使用即可，无效做其他调整。...下面贴一下简单的示例代码： $(function () { $("#jqGrid").jqGrid({ url: baseURL + 'biz/message/list',..."limit", order: "order" }, gridComplete:function(){ //隐藏grid底部滚动条...jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); } }); }); 默认情况下没有开启水平滚动条...了解了这两个属性的值之后，我们就可以对上面的代码进行重新修改，以满足需求。

3.8K1 0

iOS - Swift UICollectionView横向分页滚动，cell左右排版

情况最近在做表情键盘时遇到一个问题，我用UICollectionView来布局表情，使用横向分页滚动，但在最后一页出现了如图所示的情况只显示一半情况分析图是的，现在的item分布就是这个鬼样子....frame) { rectAttributes.append($0) } }) return rectAttributes } 大功告成完整代码

4.3K2 0

JS简易整页滚动

fullPage超简易版本 1.知识点 JS 滚动监听事件 JS 移动端touch监听事件函数节流 DOM操作 2.示例GIF ?...示例GIF 3.代码分析 1.CSS html, body设置 overflow 为 hidden, 让视图中只包括一个分页;设置滑动分页的长宽都是 100%; 外部容器设置 transition 过渡效果...向下滚动时, 当 currentPosition 比 -整体分页高度大的时候(绝对值相比小的时候), 向下滚动;向上滚动时, 当 currentPosition 大于 0 的时候, 向上滚动. /...滚动事件firefox与其他浏览器的事件不同, 所以需要进行判断. deltaY大于0的时候, 想下滚动; 反之, 向上滚动. var handlerWheel = throttle(scrollMove...mousewheel_event#The_detail_property https://developer.mozilla.org/en-US/docs/Web/API/Touch_events 5.整体代码

15.7K3 1

js 原生无缝滚动

innerHTML=demo1.innerHTML//克隆demo1为demo2 function Marquee(){ if(demo2.offsetHeight-demo.scrollTop滚动至...=setInterval(Marquee,speed)//设置定时器 demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的...//克隆demo1为demo2 function Marquee(){ console.log(‘调用’) if(demo2.offsetHeight-demo.scrollTop滚动至...=setInterval(Marquee,speed)//设置定时器 demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的

37.7K3 0

左右漂浮的广告代码

引用JS文件的代码： vardelta=0.15 varcollection; functionJavaScript 引用JS文件的代码： js"> <---- var delta=0.15 var collection; function floaters

3K2 0

JS判断滚动条是否停止滚动

背景：昨天一个同事有种需求，有一个展示数据区域的div，带滚动条，当滚动条滚动时，需要向后台发请求，计算数据，再拿到前台展示。 ...分析：由于数据量级别较大，所以当滚动条滚动时，如果时时向后台发请求，对服务器和浏览器都造成巨大的压力。想到的解决方案是，当滚动条停止时，再去发请求计算数据。...那么问题来了，如何判断滚动条是否停止了呢？解决：搜索了一下，js本身是无法判断滚动条是在滚动状态还是停止状态，只有通过其它方式了。...后来想到的思路是当滚动条滚动的时候，发起一个定期执行的方法，并记录一次当前滚动条到顶部的距离，这个方法中判断此时滚动条到顶部的距离是否和上次记录的相等，如果相等，那么说明停止滚动了，不相等，还在滚动。...代码： <!

17.4K0 0

JS 阻止页面滚动

在升级到 ios11.3 系统后，阻止页面滚动的代码 e.preventDefault 代码失效了。...表示事件采用冒泡机制（capture 译为捕获），浏览器默认就是 false passive:false 表示我现在主动告诉浏览器该监听器将使用 e.preventDefault() 来阻止浏览器默认的滚动行为...所以 Safari 中默认使用了 passive:true，告诉浏览器，此监听事件中，不会阻止默认的页面滚动。...这将导致设置的 e.preventDefault() 代码失效。所以 Safari 默认是不会阻止滚动的。...即可实现阻止移动页面滚动的功能。

23.1K5 0

【No Problem】如何解决 Mac 左右滚动误触返回事件？

关于 No Problem 记录一些项目中遇到的问题，访问地址[1] 问题描述如果 Mac 设置了触控板如下所示，在浏览器中浏览页面的时候，双指不仅可以控制左右滚动，而且可以控制前进后退这很容易造成...“误触”的情况，比如一个编辑表单（宽度很大，可以左右滚动），我填写了很多的内容，在一个表格中左右滚动的时候，返回了前一个页面，我在页面中填了很多的东西就会不见...这会很让我奔溃。...这个边界触发就是滚动到“超过”滚动区域的水平边界时才会触发，我自己称这个为浏览器的滚动溢出行为（我觉得这样容易理解），也就是其实正常的滚动不会触发那我们是不是可以在这个边界上做一些特殊的处理呢？...none 表示相邻的滚动区域不会有连续滚动效果，并且默认的滚动溢出行为会被阻止。...小结 Mac 中左右滚动导致返回的原因是滚动“超过”滚动区域的水平边界，可以使用 JavaScript 在边界条件中阻止事件，也可以通过 CSS 的 overscroll-behavior-x 控制滚动的行为

2.3K2 0

JS实现图片循环滚动

之前在前端的时候有遇到这样一个问题，实现 JS 图片的循环滚动，然后鼠标移入的时候停止滚动，鼠标移开继续滚动，这里无非就是设置了一个定时器，鼠标移上时清除定时器达到滚动停止的目的，鼠标移开时重设定时器，...代码如下： JS实现图片循环滚动 #roll {...setInterval(Marquee, speed) demo.onmouseover = function() { clearInterval(MyMar)//鼠标移上时清除定时器达到滚动停止的目的

19.8K3 0

js滚动到页面顶部

本文俺将教大家如何使用原生js的scrollTo来实现滚动到页面顶部。如果不需要使用动画来滚动，则不需要使用到任何插件。...我们可以使用原生的JavaScript window.scrollTo 传入0,0 将会立即滚动到页面左上角。...element.scrollTo(x-coord, y-coord); //或者 element.scrollTo(options) 参数 x-coord 是期望滚动到位置水平轴上距元素左上角的像素。...y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。或者 options 是一个ScrollToOptions对象。

14.3K4 0

js实现文字竖向滚动

代码已上传至github github代码地址：https://github.com/Miofly/mio.git 移动端适配 js/vue.js"> js/jquery-1.11.1.min.js"> (function (doc, win) { // 移动端适配 var...白衣扶2112弦领取247.11元现金 js

23.4K1 0

js滚动到页面顶部

原生js的scrollTo来实现滚动到页面顶部。...setting the body scroll top to anchor top $('html, body').animate({scrollTop:target_top}, 500); }); js...平滑滚动到顶部,底部,指定地方采用锚点进行页面中的跳转的确很方便，但是要想增加网页的效果，可以使用jquery中的animate，实现滚动的一个动作，慢慢的滚动到你想跳转到的位置滚动到顶部： $(...我们可以使用原生的JavaScript window.scrollTo 传入0,0 将会立即滚动到页面左上角。...y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。或者 options 是一个ScrollToOptions对象。

13.3K0 0

js动画之无缝滚动

效果图如下: HTML代码如下：无缝滚动 js"> 代码如下： window.onload = function(){ // alert(1) // 1、自动播放-- 左侧多次循环 left减小 var oList = this.document.getElementById...0) { num = -1000 } oList.style.left = num +'px' } // 2、左右箭头单击

15.1K4 0

js中scroll滚动相关

js中scroll滚动相关 scroll，滚动，一般讨论的是网页整体与浏览器之间的关系。一.元素相关属性/方法解释 element.scrollHeight 返回元素的整体高度。...window中显示的文档，x和y指定滚动的相对量。...scrollBy(0, 200) ==> 使得滚动条Y轴的位置，在当前的基础上增加200。比如：当前Y轴位置为0，执行后便是200；当前为100，执行后便是300。...要使此方法工作 window 滚动条的可见属性必须设置为true！ 2.scrollTo(x,y) scrollTo(xpos,ypos) xpos 必需。...scrollTo(x,y)方法：滚动当前window中显示的文档，让文档中由坐标x和y指定的点位于显示区域的

7.8K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭