循环滚动列表 - scrollBy

最新推荐文章于 2024-05-24 17:09:11 发布

xggllc

最新推荐文章于 2024-05-24 17:09:11 发布

阅读量1.2k

点赞数 1

分类专栏： JS相关文章标签： javascript html

本文链接：https://blog.csdn.net/xggllc/article/details/114789086

版权

JS相关专栏收录该内容

23 篇文章 0 订阅

订阅专栏

前几天做列表循环滚动的功能，记录一下。

思路：

正常思路，把滚动列表的第一个元素，接到列表的最后一位，每隐藏一条就在最后一位接上，如此循环；

今天咱们来聊更简单一些的思路，不需要操作每一条元素，但是需要复制一次整体的列表（次处可优化）。

要点：

需要用到 scrollTo ，scrollBy 定位；用scrollHeight ，offsetHeight判断。

向左滚动时把scrollTo 换成 scrollLeft，调试代码即可。

原生代码如下：

关键点在于，当滚动内容超出窗口高度的瞬间，重置滚动内容的scrollTo，那么下一次滚动刚好衔接第一行。

共享了代码资源，设置的0积分，下载后浏览器打开即可查看效果。

https://download.csdn.net/download/xggllc/15785362 --- 循环滚动列表示例-原生JS

<!doctype html>
<html lang="en">
<div id="id-scroll-div" class="list-content" style="overflow: hidden;box-sizing: border-box;width: 520px;height: 150px;background: rgba(26, 79, 133, 0.6);">
	<div id="id-scroll-item1" style="width: 100%;">
		<div style="margin: 10px 4px;background: #9fb4dc73;line-height: 40px;"> 1: 子曰：“学而时习之，不亦说乎？有朋自远方来，不亦乐乎？”</div>
		<div style="margin: 10px 4px;background: #9fb4dc73;line-height: 40px;"> 2: 有子曰：“其为人也孝弟，而好犯上者，鲜矣；”</div>
		<div style="margin: 10px 4px;background: #9fb4dc73;line-height: 40px;"> 3: 子曰：“巧言令色，鲜矣仁！”</div>
		<div style="margin: 10px 4px;background: #9fb4dc73;line-height: 40px;"> 4: 曾子曰：“吾日三省吾身：为人谋而不忠乎？与朋友交而不信乎？”</div>
		<div style="margin: 10px 4px;background: #9fb4dc73;line-height: 40px;"> 5: 子曰：“道千乘之国，敬事而信，节用而爱人，使民以时。”</div>
	</div>
	<div style="width: 100%;">
		<div style="margin: 10px 4px;background: #9fb4dc73;line-height: 40px;"> 1: 子曰：“学而时习之，不亦说乎？有朋自远方来，不亦乐乎？”</div>
		<div style="margin: 10px 4px;background: #9fb4dc73;line-height: 40px;"> 2: 有子曰：“其为人也孝弟，而好犯上者，鲜矣；”</div>
		<div style="margin: 10px 4px;background: #9fb4dc73;line-height: 40px;"> 3: 子曰：“巧言令色，鲜矣仁！”</div>
		<div style="margin: 10px 4px;background: #9fb4dc73;line-height: 40px;"> 4: 曾子曰：“吾日三省吾身：为人谋而不忠乎？与朋友交而不信乎？”</div>
		<div style="margin: 10px 4px;background: #9fb4dc73;line-height: 40px;"> 5: 子曰：“道千乘之国，敬事而信，节用而爱人，使民以时。”</div>
	</div>
</div>
</html>

<script type="text/javascript">
(function() {
	// 获取窗口dom
	var domScrollDiv = document.getElementById('id-scroll-div');
  var domScrollItem1 = document.getElementById('id-scroll-item1');
  var scrollTimer = null;
  var rollingType = 'smooth';
  var deviationY = 10;
  var rowHeight = 40;
  var interval = 50;
  var funRun = function() {
    clearInterval(scrollTimer);
    scrollTimer = null;
    if (rollingType === 'smooth') {
			interval = 50;
    } else {
    	interval = 1500;
    }
  	scrollTimer = setInterval(()=>{
        funScrollDiv();
      }, interval)
  };
  var funScrollDiv = function() {
		if (domScrollDiv.offsetHeight >= domScrollItem1.offsetHeight) {
      return;
    }
    switch (rollingType) {
      case 'oneWay': {
        if (domScrollDiv.scrollTop >= domScrollItem1.scrollHeight) {
          // 滚动到顶部
          domScrollDiv.scrollTop = 0;
          domScrollDiv.scrollTo({
            // 从顶部滚动到第一行
            top: rowHeight + deviationY,
            behavior: "smooth",
          });
        } else {
          domScrollDiv.scrollBy({
            // 相对于当前位置每次向下滚动一个项目高度
            top: rowHeight + deviationY,
            behavior: "smooth",
          });
        }
        break;
      }
      case 'page': {
        if (domScrollDiv.scrollTop + domScrollDiv.offsetHeight >= domScrollItem1.scrollHeight) {
          // 复位
          domScrollDiv.scrollTop = 0;
        } else {
          domScrollDiv.scrollBy({
            top: domScrollDiv.offsetHeight,
            behavior: "smooth",
          });
        }
        break;
      }
      default:
      	// 判断滚动位置是否超出窗口
        if (domScrollDiv.scrollTop >= domScrollItem1.scrollHeight + deviationY) {
        	// 关键操作，超出窗口时 重置位置，由于是瞬发，刚好与下一帧衔接。
          domScrollDiv.scrollTop = 0;
        } else {
          domScrollDiv.scrollTop ++;
        }
        break;
    }
  }
  funRun();
})()
</script>

xggllc

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
循环滚动列表 - scrollBy

前几天做列表循环滚动的功能，记录一下。思路：正常思路，把滚动列表的第一个元素，接到列表的最后一位，每隐藏一条就在最后一位接上，如此循环；今天咱们来聊更简单一些的思路，不需要操作每一条元素，但是需要复制一次整体的列表。要点：需要用到 scrollTo ，scrollBy 定位；用scrollHeight ，offsetHeight判断。向左滚动时把scrollTo 换成scrollLeft，调试代码即可。原生代码如下：关键点在于，当滚动内容超出窗口高度的..
复制链接

扫一扫