Question

我正在使用一个简单的滑块，但要使其在达到极限时停止，我面临着麻烦。

所以基本上，我希望即使用户试图超过它，操纵杆元素也要停在顶部和底部。

我想避免使用纯JS和/或ECMA代码以外的任何内容。

这是我的小项目：

s_Title.innerHTML = "mySlider";

dragSlider(document.getElementById("mySlider"));
var maxPos = document.getElementById("s_Groove").offsetTop - (s_Lever.offsetHeight/2);
var minPos = document.getElementById("s_Groove").offsetTop + document.getElementById("s_Groove").offsetHeight + (s_Lever.offsetHeight/2);

// Initialize SP value
document.getElementById("s_SP").innerHTML = s_Lever.offsetTop;

function dragSlider() {

    let start_Pos = 0;
    let final_Pos = 0;

    document.getElementById("s_Lever").onmousedown = dragMouseDown;

    function dragMouseDown(e) {

        e = e || window.event;
        e.preventDefault();

        // get the mouse cursor position at startup:
        start_Pos = e.clientY;
        document.onmouseup = closeDragElement;

        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
    }
    
    function elementDrag(e) {
        document.getElementById("s_SP").innerHTML = e.clientY;

        e = e || window.event;
        e.preventDefault();

        // calculate the new cursor position:
        final_Pos = start_Pos - e.clientY;
        start_Pos = e.clientY;

        // set the element's new position:
        s_Lever.style.top = (s_Lever.offsetTop - final_Pos) + "px";

        if(s_Lever.style.top <= maxPos) {
            s_Lever.style.top = maxPos;
        }
        else if(s_Lever.style.top >= minPos) {
            s_Lever.style.top = minPos;
        }
    }
    
    function closeDragElement() {
        // stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
    }
}

body{
    position: absolute;

    left: 0px;
    top: 0px;

    border: 0px;
    margin: 0px;
    padding: 0px;

    background-color: #C0C0C0;
}

#mySlider{
    position: absolute;

    left: 50px;
    top: 50px;

    width: 100px;
    height: 500px;

    border: 2px solid black;
    border-left: 2px solid white;
    border-top: 2px solid white;
    border-radius: 10px;

    margin: 0px;
    padding: 0px;

    background-color: #C0C0C0;
}

#s_Title{
    position: absolute;

    left: 0px;
    left: 0px;
    top: 0px;

    width: 100px;
    height: 40px;

    border-Bottom: 2px solid black;

    margin: 0px;
    padding: 0px;

    background-color:transparent;

    font-family: Arial;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
}

#s_Groove{
    position: absolute;

    left: 40px;
    top: 60px;

    width: 16px;
    height: 376px;

    border: 2px solid black;
    border-right: 2px solid white;
    border-bottom:2px solid white;

    margin: 0px;
    padding: 0px;

    background-color: #B0B0B0;
}

#s_Lever{
    position: absolute;

    left: 20px;
    top: 428px;

    width: 56px;
    height: 20px;

    border: 2px solid black;
    border-left: 2px solid white;
    border-top:2px solid white;

    margin: 0px;
    padding: 0px;

    background-color: #00FF0088;
}

#s_SP{
    position: absolute;

    left: 0px;
    top: 458px;

    width: 100px;
    height: 40px;

    border-top: 2px solid black;

    margin: 0px;
    padding: 0px;

    background-color: transparent;

    font-family: Arial;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="mySlider" content="Example of a slider">
        <meta name="keywords" content="slider">
        <meta name="author" content="J. V., Andrade">
        <meta name="viewport" contetn="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="mySlider">
            <div id="s_Title"></div>
            <div id="s_Groove"></div>
            <div id="s_Lever"></div>
            <div id="s_SP"></div>
        </div>

        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

Answer 1

您错了：

if (s_Lever.style.top <= maxPos)...

s_Lever.style.top是一个字符串（带有“ px”），maxPos是一个数字。您需要对其进行更正，并在if命令内的分配样式顶部添加“ px”

Answer 2

尝试这样：

body{
    position: absolute;

    left: 0px;
    top: 0px;

    border: 0px;
    margin: 0px;
    padding: 0px;

    background-color: #C0C0C0;
}

#mySlider{
    position: absolute;

    left: 50px;
    top: 50px;

    width: 100px;
    height: 500px;

    border: 2px solid black;
    border-left: 2px solid white;
    border-top: 2px solid white;
    border-radius: 10px;

    margin: 0px;
    padding: 0px;

    background-color: #C0C0C0;
}

#s_Title{
    position: absolute;

    left: 0px;
    left: 0px;
    top: 0px;

    width: 100px;
    height: 40px;

    border-Bottom: 2px solid black;

    margin: 0px;
    padding: 0px;

    background-color:transparent;

    font-family: Arial;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
}

#s_Groove{
    position: absolute;

    left: 40px;
    top: 60px;

    width: 16px;
    height: 376px;

    border: 2px solid black;
    border-right: 2px solid white;
    border-bottom:2px solid white;

    margin: 0px;
    padding: 0px;

    background-color: #B0B0B0;
}

#s_Lever{
    position: absolute;

    left: 20px;
    top: 428px;

    width: 56px;
    height: 20px;

    border: 2px solid black;
    border-left: 2px solid white;
    border-top:2px solid white;

    margin: 0px;
    padding: 0px;

    background-color: #00FF0088;
}

#s_SP{
    position: absolute;

    left: 0px;
    top: 458px;

    width: 100px;
    height: 40px;

    border-top: 2px solid black;

    margin: 0px;
    padding: 0px;

    background-color: transparent;

    font-family: Arial;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="mySlider" content="Example of a slider">
        <meta name="keywords" content="slider">
        <meta name="author" content="J. V., Andrade">
        <meta name="viewport" contetn="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="mySlider">
            <div id="s_Title"></div>
            <div id="s_Groove"></div>
            <div id="s_Lever"></div>
            <div id="s_SP"></div>
        </div>

        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

maxPos

需要一些调整：

maxPos
比较逻辑需要使用数字而不是字符串
应用spring.datasource.hikari.maxLifetime=600000 spring.datasource.hikari.maximumPoolSize=3 spring.datasource.hikari.minimumIdle=1时，还需要包含单位

限制滑块的顶部和底部

2 个答案: