gpt4 book ai didi

javascript - 在固定高度的滚动条上滑动 div

转载 作者:行者123 更新时间:2023-11-28 03:48:49 25 4
gpt4 key购买 nike

大家。我有一个问题,我希望有人可以帮助我。 我有这个项目,当用户向下滚动和向上滚动向右移动时,我需要将红色 div 移动到左侧(您可以看到下面的代码)。要点是网站的高度是固定的,并且不能有滚动条。 JS 必须检测滚动而不是页面高度。我尝试了所有我能找到的方法,并花了将近一周的时间来解决这个问题。如果它能够响应,那就太好了,如果不能的话也没关系。

这是链接 ------> jsfiddlecodepen 我放置了一个按钮,以便您可以看到我希望达到的效果。

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<title>Document</title>
</head>
<style>
body{
overflow: hidden;
margin: 0;
padding: 0;
}
#blue{
background: blue;
width: 100%;
height:50vh;
position: absolute;
bottom: 0;
}

.red{
background: red;
width: 2000px;
height: 500px;
position: absolute;
/* position to be changed to 1000px */
left: 2000px;
transition: 2s ease-in-out;
}
</style>

<body>
<button onclick="slide()">press</button>
<div id="move" class="red">red</div>
<div id="blue">blue</div>

<script>
function slide(){
let moveRed = document.getElementById('move');
if(moveRed.style.left=='2000px'){
moveRed.style.left = '500px';
}else{
moveRed.style.left = '2000px';
}
}
</script>
</html>

谢谢,祝您度过愉快的一天或一夜:)

最佳答案

您可以创建一个单独的函数来处理滚动事件并使用 window.onwheel()跟踪鼠标在页面上滚动的方法。

我添加了|| moveRed.style.left == ''到你的 if 语句:

if(moveRed.style.left=='2000px' || moveRed.style.left == '')

.style.left对于 <div id="move">开头有一个空值。

注意:我还添加了对其他一些浏览器的 CSS 转换支持。

这是代码:(运行底部的代码片段进行测试)

window.onwheel = wheelslide;

// window scroll function
function wheelslide(e)
{
var moveRed = document.getElementById('move');

// scrolling downward
if(e.deltaY > 0)
{
if(moveRed.style.left == '2000px' || moveRed.style.left == '') moveRed.style.left = '500px';
}
else
{
if(moveRed.style.left == '500px') moveRed.style.left = '2000px';
}
}

// button function
function slide()
{
let moveRed = document.getElementById('move');

if(moveRed.style.left=='2000px' || moveRed.style.left == '')
{
moveRed.style.left = '500px';
}
else
{
moveRed.style.left = '2000px';
}
}
body{
overflow: hidden;
margin: 0;
padding: 0;
}
#blue{
background: blue;
width: 100%;
height:50vh;
position: absolute;
bottom: 0;
}

.red{
background: red;
width: 2000px;
height: 500px;
position: absolute;
left: 2000px;
transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
-webkit-transition: 2s ease-in-out;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<title>Document</title>
</head>

<body>
<button onclick="slide()">press</button>
<div id="move" class="red">red</div>
<div id="blue">blue</div>
</body>
</html>

关于javascript - 在固定高度的滚动条上滑动 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48213057/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com