Question

假设我们有一个窗口，通常我们可以向上和向下滚动，左右滚动和对角线。换句话说，我可以向下滚动并同时离开。我想要做的是一次只滚动一个方向。无论是上下还是左右。我不想通过对角线滚动。

这可能在HTML中吗？

Answer 1

我个人不知道纯HTML方法，但您可以查看Sly Plugin单向滚动。应该做的伎俩。

Answer 2

通常情况下，除非网站的宽度超出屏幕尺寸，否则无论如何都不能向x方向滚动。唯一的方法是防止CSS overflow-x: hidden溢出。

但是如果用户有显示器，内容不再适合（例如智能手机显示）或使用浏览器缩放，则隐藏内容可能存在问题......

Answer 3

如果要禁用鼠标中键滚动，可以将其放在HTML文档的head部分（请注意这实际上会禁用中间按钮）：< / p>

$(document).ready(function(){
    document.onmousedown = window.onmousedown = function (e) {
        if(e.which == 2)
        {
            e = e || window.event;
            if (e.preventDefault)
                e.preventDefault();
            e.returnValue = false;
        }
    };
});

Answer 4

这些答案似乎不是您想要的。我来这里问同样的问题，寻找一种更简单的方法，但是看来这必须要做：

//When scrolling, execute the "Lock Direction" function lockdir()
<body onscroll="lockdir()">

在身体内部（或者我想头部也可以工作），添加以下脚本：

<script>

    //Scroll Variables 
    var scr = {
        initPos: [0, 0],    //Initial Mouse Position
        cPos: [0, 0],       //Current Mouse Position
        locked: 0,          //A direction is locked
        timeout: 0,         //Scroll timeout counter
    }


    //Lock Direction Function
    function lockdir(){
        scr.timeout = 0;    //Keep scroll counter at 0 while scrolling

        //Get the current mouse position and find difference to initial position
        scr.cPos = [
            document.body.scrollTop, 
            document.body.scrollLeft
        ];
        var dif = [
            Math.abs(cPos[0] - scr.initPos[0]),
            Math.abs(cPos[1] - scr.initPos[1])
        ];


        //If no direction is locked (0), lock direction moved least when scrolling started
        if (scr.locked === 0){

            if (dif[1] > dif[0]){
                scr.locked = 2;     //Lock Vertical Scrolling
            }else{
                scr.locked = 1;     //Lock Horizontal Scrolling
            }

        }


        //Reset Locked Direction to initial value
        if (scr.locked === 1){
            document.body.scrollLeft = scr.initPos[1];
        }else{
            document.body.scrollTop = scr.initPos[0];
        }

    }

    //Cancels Lock if timer exceeds 20 milliseconds
    function cancelLock(){
        if (scr.timeout > 20){
            scr.locked = 0;
            scr.initPos = scr.cPos;
        }

        scr.timeout++;
    }

    window.setInterval(cancelLock, 1);  //Repeats cancel lock
</script>

如何锁定滚动以仅在HTML中向一个方向移动

4 个答案: