Question

将水平滚动逻辑转换为位置滚动逻辑时遇到问题。总结我的问题；我有一个具有溢出元素的div，该元素需要是可滚动的，但不是滚动条/溢出，而是position：left。我有不错的解决方案，但是在点击重置后，一切都变得艰难了。

下面的代码片段是让我滞留的地方，当您单击并拖动该孩子时，其作用应与水平滚动时相同。

另外，请注意，我必须使用mousedown / mousemove / mouseup事件，以便可以将逻辑移植到触摸上

谢谢！

var $scrollWithin = $('#child');

var clicked = false, clickX;
$(document).on({
    'mousemove': function(e) {
        clicked && updateScrollPos(e);
    },
    'mousedown': function(e) {
        clicked = true;
        clickX = e.pageX;
    },
    'mouseup': function() {
        clicked = false;
    }
});

var lastLeft = 0;
var updateScrollPos = function(e) {
    
    var left = lastLeft + (clickX - e.pageX);
    
    $scrollWithin.css('left', left + 'px');
    lastLeft = left;
}

#child {
height:200px;
width:4000px;
background: linear-gradient(to right, rgba(169,3,41,1) 0%,rgba(0,80,255,1) 100%);
position:relative;
}


#parent {
  width:300px;
  overflow:hidden;
  border:solid 4px #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="parent">
<div id="child"></div>
</div>

使用位置和滑动水平滚动

0 个答案: