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

Question

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

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

Answer 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++) {&nbsp; &nbsp; x.innerHTML += '<span class="myword" id=w' + i + ' draggable="true" ondragstart="drag(event)">' + wordsList[i] + '</span>';}/////////////////function allowDrop(ev) {&nbsp; &nbsp; ev.preventDefault();}function drag(ev) {&nbsp; &nbsp; document.location = '#stage'&nbsp; // <--- Scrolling to element '#stage'&nbsp; &nbsp; ev.dataTransfer.setData("text", ev.target.id);}function drop(ev) {&nbsp; &nbsp; ev.preventDefault();&nbsp; &nbsp; var data = ev.dataTransfer.getData("text");&nbsp; &nbsp; ev.target.appendChild(document.getElementById(data));}.myword {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; margin: 5px;&nbsp; &nbsp; cursor: move;&nbsp; &nbsp; cursor: grab;&nbsp; &nbsp; cursor: -moz-grab;&nbsp; &nbsp; cursor: -webkit-grab;}#stage {&nbsp; &nbsp; border: 10px solid orange;&nbsp; &nbsp; min-height: 100px;}<div id="words-wrap"></div><div id="stage" ondrop="drop(event)" ondragover="allowDrop(event)"></div>