在javascript中拖动时如何更改自动滚动“开始区域”？答案

【问题标题】：How to change the auto scroll "start zone" while dragging in javascript?在javascript中拖动时如何更改自动滚动“开始区域”？
【发布时间】：2020-11-04 10:24:25
【问题描述】：

我为我的学生做了一个项目，他们必须将单词拖放到正确的框中。不幸的是，有很多问题，所以学生需要滚动才能访问底部的问题。我的问题如下：将鼠标拖动到页面底部以滚动的任务确实不是最佳的。页面开始滚动的区域非常小，所以我想办法让它变大（或者当拖动到页面的 2/3 时触发滚动）。

我不是很擅长 javascript 和 css，所以请帮助我。

【问题讨论】：

请提供更多描述和代码，以便有人可以帮助您
大声笑你教得怎么样？

标签： javascript html css scroll drag-and-drop

【解决方案1】：

这是我为你做的。我希望我正确理解了这个任务。

抓住一个词，然后把它放在橙色的盒子里。将夹子放入盒子后，您可以重新排列单词。

您要使用的词必须输入到wordsList 变量中

（在代码中我用注释标记了滚动到您需要的元素 ID 的行）

我希望我对你有所帮助，希望你教的孩子享受你想要给他们带来惊喜的东西

var wordsList = ['lorem', 'ipsum', 'dolor', 'sit', 'amet', 'consectetur', 'adipisicing', 'elit', 'omnis', 'laudantium', 'illo', 'ducimus', 'ipsam', 'eaque', 'quia', 'sequi', 'dicta', 'accusamus', 'ad', 'facilis', 'nam', 'corrupti', 'reiciendis', 'labore', 'aliquam', 'Autem', 'sunt', 'consequuntur', 'officia', 'ipsum', 'dolor', 'sit', 'amet', 'consectetur', 'adipisicing', 'elit', 'omnis', 'laudantium', 'illo', 'ducimus', 'ipsam', 'eaque', 'quia', 'sequi', 'ad', 'facilis', 'nam', 'corrupti', 'reiciendis', 'labore', 'aliquam!', 'Autem', 'sunt', 'consequuntur', 'officia'];

var x = document.getElementById('words-wrap');
for (var i = 0; i < wordsList.length; i++) {
    x.innerHTML += '<span class="myword" id=w' + i + ' draggable="true" ondragstart="drag(event)">' + wordsList[i] + '</span>';
}

/////////////////

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    document.location = '#stage'  // <--- Scrolling to element '#stage'
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

.myword {
    display: inline-block;
    margin: 5px;
    cursor: move;

    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

#stage {
    border: 10px solid orange;
    min-height: 100px;
}

<div id="words-wrap">
</div>

<div id="stage" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>

【讨论】：

非常感谢，它帮助我解决了问题！
很高兴能帮上忙！