javascript - 隐藏滚动时且不在焦点上的元素

标签 javascript html

我正在尝试创建表单列表并禁用它们，并且仅启用焦点表单。然后，当向下滚动时，一个表单将被禁用，而下一个焦点表单将被启用。这是我正在搞乱的代码:

(我发布下面代码的原因是当前每个表单元素在未获得焦点时都不会被禁用。我希望在获得焦点时一次仅启用几个元素，而其他元素则被禁用)

function SubmitName() {
  var form = document.getElementById("InputName");
  var elements = form.elements;
  for (var i = 0, len = elements.length; i < len; ++i) {
    elements[i].disabled = true;
  }
}
.body {}

.buttonTans {
  width: 80px;
  height: 50px;
  background: grey;
  -webkit-transition: width .5s;
  /* For Safari 3.1 to 6.0 */
  transition: width .5s;
}

.buttonTans:hover {
  width: 100px;
}

.formsize {
  height: 50px;
  font-size: 25px;
}

.ResizeForms {
  width: 120px;
}

.ResizeForms:hover {
  -webkit-transition: width .5s;
  /* For Safari 3.1 to 6.0 */
  transition: width .5s;
  width: 150px;
}
<form id="InputName">
  First name:<br>
  <input id="firstname" class="ResizeForms formsize" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms formsize" type="text" name="lastname"><br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>
<form id="InputName2">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname"><br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>
<form id="InputName3">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname"><br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>
<form id="InputName4">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname"><br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>
<form id="InputName5">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname"><br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>
<form id="InputName6">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname"><br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>
<form id="InputName7">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname"><br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>
<form id="InputName8">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname"><br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>
<form id="InputName9">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname"><br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>
<form id="InputName10">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname"><br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>

如果您选择“市场调查”之类的内容，您可以在这里看到我在说什么

https://admin.typeform.com/gallery/workspaces/11216029#/

TLDR:

如何在滚动时不直接查看表单时禁用表单(在聚焦时一次启用一个或仅一个表单)？

编辑

感谢 felixmosh，我设法使用事件监听器滚动解决方案。这是我修改后的代码。 Stille 对其进行了一些调整，但我将发布它，以便其他人也可以使用它:

function SubmitName() {
  var form = document.getElementById("InputName");
  var elements = form.elements;
  for (i = 0, len = elements.length; i < len; ++i) {
    elements[i].disabled = true;
  }
}


var yPositionForm = new Array(10); //array which stores yposition of each form
var formIdName = ["InputName", "InputName2", "InputName3", "InputName4", "InputName5", "InputName6", "InputName7", "InputName8", "InputName9", "InputName10"];

function findTop(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.top;
}

function findFormPositions() {
  for (var k = 0; k <= yPositionForm.length - 1; k++) {
    yPositionForm[k] = findTop(formIdName[k]);
  }
}

function disableFormElements() {

  var formName = formIdName[0];
  var formString = formIdName[0];

  var j = 0;

  while (j <= formIdName.length - 1) {
    var form = document.getElementById(formIdName[j]);
    var elements = form.elements;
    for (i = 0, len = elements.length; i < len; ++i) {
      elements[i].disabled = true;
      elements[i].style.opacity = 0.5;
    }
    j++;
  }

  //do something here to mess with opacity
}

function disableAllButTop() {

  var formName = formIdName[0];
  var formString = formIdName[0];

  var j = 1;

  while (j <= formIdName.length - 1) {
    var form = document.getElementById(formIdName[j]);
    var elements = form.elements;
    for (i = 0, len = elements.length; i < len; ++i) {
      elements[i].disabled = true;
      elements[i].style.opacity = 0.5; //do something here to mess with opacity
    }
    j++;
  }
}


disableAllButTop(); //start with all forms disabled but the first one

var last_known_scroll_position = 0;
var ticking = false;



function doSomethingOnScroll(scroll_pos) {
  // do something with the scroll position
  disableFormElements();
  findFormPositions();

  for (var k = 0; k <= yPositionForm.length - 1; k++) {
    if (yPositionForm[k] <= scroll_pos + 315 && yPositionForm[k] >= scroll_pos - 80) {
      EnableForum(formIdName[k]);
    }
  }
}

function EnableForum(name) {
  var form = document.getElementById(name);
  var elements = form.elements;
  for (i = 0, len = elements.length; i < len; ++i) {
    elements[i].disabled = false;
    elements[i].style.opacity = 1; //do something here to mess with opacity
  }
}

window.addEventListener('scroll', function(e) {

  last_known_scroll_position = window.scrollY;

  if (!ticking) {

    window.requestAnimationFrame(function() {
      doSomethingOnScroll(last_known_scroll_position);
      ticking = false;
    });

    ticking = true;

  }

});
.body {}

.testVisible.visible {
  display: block;
}

.buttonTans {
  width: 80px;
  height: 50px;
  background: grey;
  -webkit-transition: width .5s;
  /* For Safari 3.1 to 6.0 */
  transition: width .5s;
}

.buttonTans:hover {
  width: 100px;
}

.formsize {
  height: 50px;
  font-size: 25px;
}

.ResizeForms {
  width: 120px;
}

.ResizeForms:hover {
  -webkit-transition: width .5s;
  /* For Safari 3.1 to 6.0 */
  transition: width .5s;
  width: 150px;
}
<form id="InputName" class="testVisible">
  First name:<br>
  <input id="firstname" class="ResizeForms formsize" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms formsize" type="text" name="lastname">
  <br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>

<form id="InputName2">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname">
  <br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>


<form id="InputName3">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname">
  <br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>


<form id="InputName4">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname">
  <br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>

<form id="InputName5">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname">
  <br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>

<form id="InputName6">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname">
  <br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>


<form id="InputName7">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname">
  <br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>

<form id="InputName8">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname">
  <br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>


<form id="InputName9">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname">
  <br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>


<form id="InputName10">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname">
  <br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>

最佳答案

有很多选项可以监听滚动事件，其中之一正在使用 scroll event , window.addEventListener('scroll', function(e) {}) 其他内容可以使用任何可用的 spy 滚动库来完成。

关于javascript - 隐藏滚动时且不在焦点上的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47151346/

上一篇：javascript - 如何在 fullcalendar 的 updateEvent 中传递 startDate 和 event ？

下一篇：javascript - 原型(prototype)的功能未定义

相关文章：

javascript - 使用Javascript使图像在页面打开时可见

javascript - 我必须等待 void 异步函数吗？

javascript - 如果存在则更新或将新元素添加到对象数组 - javascript + lodash 中的优雅方式

html - 添加空白 pre 后文本在 bootstrap 中超出 div

javascript - 缩放图像和 HTML5 视频以适合具有相同高度的行

javascript - 如果某些数组元素未定义，如何在对象数组中查找对象？

javascript - 尝试代理 ES6 类构造函数时出现 TypeError

html - 创建一个具有两行文本的完美圆

javascript - 正在下载的文件没有正确的名称和扩展名

javascript - 仅显示两个选择框

©2024 IT工具网  联系我们