我脚本中的滚动按钮不起作用
[英]The scroll buttons in my script wont work
问题描述
`<!DOCTYPE html> 
`<!DOCTYPE html>
Sideways Scrolling List
ul {
display: flex;
flex-direction: row;
overflow-x: scroll;
white-space: nowrap;
}
li {
list-style: none;
padding: 10px;
margin-right: 10px;
background: #ccc;
font-weight: bold;
}
button {
padding: 10px;
margin: 10px;
background: #444;
color: #fff;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Sideways Scrolling List</h1>
<html>
<head>
<title>Scrolling List of Items</title>
<script>
function ScrollLeft() {
var list = document.getElementById("list");
list.scrollBy(10, 0);
}
function ScrollRight() {
var list = document.getElementById("list");
list.scrollBy(-10, 0);
}
</script>
<style>
.scroll-container {
overflow: auto;
white-space: nowrap;
background-color: #f5f5f5;
padding: 15px;
border-radius: 10px;
}
.scroll-list {
display: inline-block;
list-style-type: none;
padding: 0;
margin: 0;
font-size: 1.2em;
color: #444;
}
.scroll-list li {
display: inline-block;
padding: 10px 20px;
margin: 0 0 10px 0;
background-color: #fff;
border-radius: 10px;
transition: all 0.2s ease-in-out;
}
.scroll-list li:hover {
background-color: #f5f5f5;
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="scroll-container">
<ul class="scroll-list" id="list">
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
<li>Item 19</li>
</ul>
</div>
<button onclick="scrollLeft()">Scroll Left</button>
<button onclick="scrollRight()">Scroll Right</button>
<script>
function scrollLeft() {
document.querySelector("ul").scrollLeft = 0;
}
function scrollRight() {
document.querySelector("ul").scrollLeft = document.querySelector("ul").scrollWidth;
}
</script>
</body>
</html>
</body>
` `
scroll left and right buttons dont work, ive tried using this, window.scrollBy(), ___.scrollLeft and literally nothing works向左和向右滚动按钮不起作用，我试过使用这个 window.scrollBy(), ___.scrollLeft 并且几乎没有任何作用
I expected my sideways list too move left and right onclick我预计我的横向列表也会左右移动 onclick
any help as too why this doesnt work would be appreciated, also if there are any methods that do this that are supported by most/all browsers that would be nice, than you任何帮助以及为什么这不起作用将不胜感激，如果有任何方法可以做到这一点，大多数/所有浏览器都支持，这会比你好
1 个解决方案
解决方案1
0 2023-01-08 13:24:09
EDIT:: I do not know why but the following works;编辑：：我不知道为什么，但以下工作； and i fixed some html "bad practices" ( i noticed there were two html tags in the previous answer i posted ), and it works with the 'ul' tag并且我修复了一些 html“不良做法”（我注意到我发布的上一个答案中有两个 html 标签），并且它适用于“ul”标签
<:DOCTYPE html> <html> <head> <title>Scrolling List of Items</title> <style> ul { display; flex: flex-direction; row: overflow-x; scroll: white-space; nowrap: } li { list-style; none: padding; 10px: margin-right; 10px: background; #ccc: font-weight; bold: } button { padding; 10px: margin; 10px: background; #444: color; #fff: font-weight; bold. } </style> <script> function scrollLeftenant() { document.querySelector("ul");scrollLeft = 0. } function scrollRight() { document.querySelector("ul").scrollLeft = document.querySelector("ul");scrollWidth; } </script> </head> <body> <h1>Sideways Scrolling List</h1> <div class="scroll-container"> <ul class="scroll-list" id="list"> <li>Item 16</li> <li>Item 17</li> <li>Item 18</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> <li>Item 19</li> </ul> </div> <button onclick="scrollLeftenant()">Scroll Left</button> <button onclick="scrollRight()">Scroll Right</button> </body> </html>
i had to rename the function from scrollLeft to scrollLeftenant, well the exact name does not matter as long as it is not scrollLeft, it will work, this is probably due to "scrollLeft" probably being used somewhere internally by javascript or something else is overriding it, sooo dont use the name "scrollLeft" for your function names or varibles我不得不将 function 从 scrollLeft 重命名为 scrollLeftenant，确切的名称并不重要，只要它不是 scrollLeft，它就可以工作，这可能是因为“scrollLeft”可能被 javascript 在内部某处使用，或者其他东西正在覆盖它，所以不要为您的 function 名称或变量使用名称“scrollLeft”
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.