如何修复我用vanilla JavaScript写的水平滚动脚本
要修复使用vanilla JavaScript编写的水平滚动脚本，首先需要了解脚本的具体问题和目标效果。以下是一些常见问题及其解决方案：
常见问题及解决方案
- 滚动不流畅：
- 原因：可能是由于频繁的DOM操作或重绘导致的性能问题。
- 解决方案：使用
requestAnimationFrame来优化动画效果。
- 滚动方向错误：
- 原因：可能是由于事件处理程序中的逻辑错误。
- 解决方案：检查事件处理程序中的条件判断，确保滚动方向正确。
- 滚动范围超出边界：
- 原因：可能是由于没有正确计算滚动范围。
- 解决方案：在滚动事件中添加边界检查逻辑。
示例代码
假设你有一个简单的水平滚动脚本，以下是一个可能的实现和修复示例：
原始代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Scroll</title>
<style>
.scroll-container {
width: 100%;
overflow-x: auto;
white-space: nowrap;
}
.scroll-item {
display: inline-block;
width: 200px;
height: 200px;
background-color: lightblue;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="scroll-container" id="scrollContainer">
<div class="scroll-item"></div>
<div class="scroll-item"></div>
<div class="scroll-item"></div>
<!-- More items -->
</div>
<button onclick="scrollLeft()">Scroll Left</button>
<button onclick="scrollRight()">Scroll Right</button>
<script>
function scrollLeft() {
var container = document.getElementById('scrollContainer');
container.scrollLeft -= 100;
}
function scrollRight() {
var container = document.getElementById('scrollContainer');
container.scrollLeft += 100;
}
</script>
</body>
</html>修复后的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Scroll</title>
<style>
.scroll-container {
width: 100%;
overflow-x: auto;
white-space: nowrap;
}
.scroll-item {
display: inline-block;
width: 200px;
height: 200px;
background-color: lightblue;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="scroll-container" id="scrollContainer">
<div class="scroll-item"></div>
<div class="scroll-item"></div>
<div class="scroll-item"></div>
<!-- More items -->
</div>
<button onclick="scrollLeft()">Scroll Left</button>
<button onclick="scrollRight()">Scroll Right</button>
<script>
function scrollLeft() {
smoothScroll(document.getElementById('scrollContainer'), -100);
}
function scrollRight() {
smoothScroll(document.getElementById('scrollContainer'), 100);
}
function smoothScroll(container, delta) {
const start = container.scrollLeft;
const change = delta;
const duration = 200; // milliseconds
let startTime = null;
function animateScroll(currentTime) {
if (!startTime) startTime = currentTime;
const timeElapsed = currentTime - startTime;
const run = ease(timeElapsed, start, change, duration);
container.scrollLeft = run;
if (timeElapsed < duration) requestAnimationFrame(animateScroll);
}
function ease(t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t * (t - 2) - 1) + b;
}
requestAnimationFrame(animateScroll);
}
</script>
</body>
</html>解释
- 平滑滚动：通过
requestAnimationFrame和缓动函数ease实现平滑滚动效果。 - 边界检查：可以在
smoothScroll函数中添加边界检查逻辑，确保滚动范围不超出容器边界。
参考链接
通过以上方法，你可以修复水平滚动脚本中的常见问题，并提升用户体验。
相关·内容
我根据YouTube的一些想法做了这个水平滚动页面，一切都很好，逻辑也很好，但是x的翻译有一个问题，有时它翻译X太多或有时低于它应该做的，必须在translateThisMuch常量上做一些更改，但我想不出任何东西这是指向代码https://codepen.io/AbramPlus/pen/RwwoPrW的链接，请注意，当它从滚动部分的不同部分移动到其他部分时，仍然有一些其他部分留在视
浏览 18提问于2019-10-19得票数 1
回答已采纳
1回答
我正在尝试开发一个水平滚动的网站，在其中单击导航中的链接将页面滚动到链接的div的右侧。下面是指向我的HTML：的粘贴链接，下面是CSS：
我</em
浏览 0提问于2012-09-21得票数 1
2回答
如何向此网站添加水平滚动它不能是触摸板的shift+scroll或swipe滚动 完整的网站代码可以在https://github.com/itskhagendra/NYX上找到 该网站的网址为https://itskhagendra.github.io/NYX/ 我已经尝试过vanilla javascript var item = d
浏览 24提问于2019-06-19得票数 0
回答已采纳
如何在多个脚本中识别哪些变量被用作全局变量？该网页导入了许多用Vanilla JavaScript编写的不同脚本。从表面上看，有几个常见的变量是通过多个脚本文件使用的，这是造成问题的原因。
通过使用‘let’(组合文件中的vscode上的cntl+h)将
浏览 1提问于2020-03-12得票数 0
回答已采纳
2回答
垂直位置固定
、、、
我需要修复一个离窗口顶部16像素的div/image ...内容需要滚动，但div/image无法滚动...我的主要问题是它不能用position属性修复，因为我需要它水平滚动。和位置:固定它的垂直和水平锁定...有没有办法说d
浏览 1提问于2015-07-10得票数 4
我真的很喜欢，但是有一些东西不太好用。我已经在本地研究了所有这些问题，所以我想在重新安排代码之前，我应该问一下是否有已知的方法来解决这些问题。水平滚动不起作用(垂直滚动)
我能控制滚动条的宽度吗?默认<e
浏览 4提问于2011-11-17得票数 0
1回答
我创建了一个大div (图1.1中的__div1)，并将其设置为position: absolute。这个div是页面的内容容器，在这个div中是所有其他元素。我做这个div的原因是为了删除浏览器中的滚动弹出：
我的问题是，如果我有其他的绝对div在大的一个。在图1.1中可以看到 div2 with position:absolute，如果div1正在滚动，div2
浏览 3提问于2015-10-08得票数 1
回答已采纳
从上面的线程中，我能够水平和垂直滚动一个HTML表，而左边的列是固定的，但是我想修复标题的垂直滚动。我想要的HTML表：
我使用了一个，它工作得很好，但我也想
浏览 2提问于2019-04-19得票数 1
我有一个div，就像这样 { position:fixed; top:0px; 当我垂直或水平滚动时，位置是固定的但是我想当用户垂直滚动滚动条时，div被修复，但当用户水平滚动滚动条时，div应该变化。
我看过一些论坛和帖子，但我主要还是找到了jquery脚本。我<
浏览 0提问于2012-06-05得票数 6
回答已采纳
我需要创建一个水平滚动条来控制水平DIV中的滚动。我知道我可能可以编写一些jQuery脚本来处理<e
浏览 6提问于2009-12-29得票数 0
回答已采纳
我试图达到这样的效果，我在外部div周围有一个垂直滚动条，而水平内容从其中溢出。为此，我在style.css中将overflow-y设置为auto： background-color:brown; heightp>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p><
浏览 2提问于2017-03-16得票数 0
1回答
如何创建只水平滚动的元素？如果它有意义，我希望元素的行为就像是position: for，当用户垂直向下滚动页面时，但行为像它的position:static表示横向滚动。最好使用HTML/CSS解决方案，但是如果不可行，可以使用JavaScript修复。
浏览 3提问于2010-06-13得票数 1
我试着制作一个全屏幻灯片-- 的效果如何，但我对如何做到这一点有疑问。从我的例子小提琴可以看到，我希望图片尽可能大，而不扭曲它(适合屏幕)。我也希望它是垂直和水平的中心。水平对中--它是在css中处理的，但我不得不使用JavaScript进行垂直对中。
是否有更好的方法来做到这一点(例如，所有
浏览 5提问于2011-07-25得票数 0
回答已采纳
似乎在Safari (版本: 9.1 )中，无论是jQuery还是vanilla JavaScript都没有捕捉到滚动事件。我的目标是捕捉滚动的位置，如果它低于50px，通过添加一个类来修复导航栏，否则删除那个类。
我放在下面的代码片段可以在Chrome、Firefox和IE中运行，但不能在Safari中运行。
浏览 0提问于2016-11-04得票数 1
1回答
如何用水平滚动固定表头？
、、、、
我的表头有两行。这些行中的列数不同。问题是，这些插件工作很好，直到你想修复标题，如果没有水平滚动。事实上，声称支持水平滚动条，但在我的例子中失败了。
我也尝试过手动修复它。我用
浏览 3提问于2012-03-19得票数 0
问题当我访问像localhost:3000/people这样的页面时，内容会如期而至地异步呈现。但是，如果内容位于通过ajax加载的部分中，则不会异步呈现内容。我不明白为什么它不起作用，我也不知道如何解决它。
如果render_async在通过ajax加载的部分中，我如何使用它？= $("<%= escape_javascript<
浏览 0提问于2018-10-16得票数 1
回答已采纳
1回答
有没有人知道有没有办法用javascript/css/html在ipad上的safari中锁定水平滚动？<!
浏览 1提问于2010-12-10得票数 1
1回答
我有一个“固定”的菜单栏在左侧的网站，我想要跟随滚动条下来的页面时，用户滚动。到目前为止，我已经尝试了两种方法，一种是css，另一种是jquery：#leftframe { width: 200;
}这种解决方案的问题是，当窗口不是很宽时，当用户试图滚动时，它会直接转到页面内容上。2)
浏览 0提问于2013-04-26得票数 2
回答已采纳
2回答
我有一个具有轻微动画(视差)背景的网站的请求。完全支持IE8。如果可能的话，还要支持平板电脑(比如iPads和安卓平板电脑)。选择其中的两个，这将是很容易做的，但试图涵盖所有三个是有点令人望而生畏的……有没有人知道哪种语言/技术可以涵盖这三种请求？
浏览 4提问于2012-08-08得票数 0
回答已采纳
在桌面浏览器上，我可以使用以下javascript垂直修复元素，但仍然允许水平滚动。正如您所看到的，它在每个滚动事件上重新定位元素。要理解我的意思，请尝试在这个中进行水平和垂直滚动。verticallyFixedBox.style.top = '' + document.body.scrollTop + 'px';然而，对于移动浏览器来说，这种逻辑失
浏览 5提问于2015-06-05得票数 6
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
