滚动窗口到元素底部 [英] Scrolling window to the bottom of an element

问题描述

我正在尝试向正在处理的应用程序中的模块添加一个功能，当元素高度大于窗口高度时，它会将浏览器窗口滚动到元素的底部.

该模块有点类似于下面的代码片段，当列表的高度大于窗口的高度时将项目添加到列表中时，您必须向下滚动才能再次看到添加按钮，所以有没有办法我可以自动做到这一点，顺便说一下==(顺便说一句)我不是说滚动到文档底部，只是一个特定的元素.

(function() {var 列表 = document.querySelector('ul'),addBtn = 列表.nextElementSibling.lastElementChild，textInput = addBtn.previousElementSibling;addBtn.addEventListener('click', appendItem);函数追加项目(){var item = document.createElement('li');if (textInput.value == '') item.innerText = 'test-item';else item.innerText = textInput.value;list.appendChild(item);}console.log(lists, addBtn, textInput);})();

div:not(#fake-form) {背景色:#F9F2C4；最大宽度:200px；边距:0 自动；}ul{列表样式:无；填充:4px；边距:0；}乌利{列表样式:无；填充:4px；边距:0；字体大小:24px；}div#fake-form {文本对齐:居中；填充:4px；}输入 {显示:块；宽度:100%；box-sizing: 边框框；底边距:4px；}

<ul><li>测试项目</li><li>测试项目</li><li>测试项目</li><li>测试项目</li><li>测试项目</li><li>测试项目</li><li>测试项目</li><div id="假表单"><输入类型=文本"><button>添加项目</button>

解决方案

此 jQuery 代码将滚动以将元素底部置于窗口底部.我基本上只是获取要滚动到的元素的顶部位置，然后将元素的高度添加到顶部位置以确定底部位置.从底部位置值减去窗口高度，然后滚动到结果值会将元素的底部放在窗口的底部.如果您希望元素的底部位于窗口的顶部(真正滚动到元素的底部，但它会在视口之外)，只需滚动到 divBot.

$('button').on('click', function() {var wHeight = $(window).height(),divTop = $('#one').offset().top,divHeight = $('#one').outerHeight(),divBot = divTop + divHeight;$('html, body').animate({scrollTop: (divBot - wHeight)}, 2000);})

div {高度:200vh；边框底部:5px纯黑色；}#一 {边框颜色:红色；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><button>点击</button></div><div id="one"></div><div></div>

I am trying to add a functionality to a module in the application am working on, which will scroll the browser window to the bottom of an element when the element height is greater than the window's height.

the module is kinda similar to the snippet below, when you add an item to the list when the list's height is greater than the window's height you would have to scroll down to see the add button again, so is there a way i can do this automatically, by the way == (BTW) i don't mean scrolling to the bottom of the document, just a specific element.

(function() {

  var lists = document.querySelector('ul'),
    addBtn = lists.nextElementSibling.lastElementChild,
    textInput = addBtn.previousElementSibling;

  addBtn.addEventListener('click', appendItem);

  function appendItem() {
    var item = document.createElement('li');
    if (textInput.value == '') item.innerText = 'test-item';
    else item.innerText = textInput.value;

    lists.appendChild(item);
  }

  console.log(lists, addBtn, textInput);
})();

div:not(#fake-form) {
  background-color: #F9F2C4;
  max-width: 200px;
  margin: 0 auto;
}
ul {
  list-style: none;
  padding: 4px;
  margin: 0;
}
ul li {
  list-style: none;
  padding: 4px;
  margin: 0;
  font-size: 24px;
}
div#fake-form {
  text-align: center;
  padding: 4px;
}
input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 4px;
}

<div>
  <ul>
    <li>test item</li>
    <li>test item</li>
    <li>test item</li>
    <li>test item</li>
    <li>test item</li>
    <li>test item</li>
    <li>test item</li>
  </ul>
  <div id="fake-form">
    <input type="text">
    <button>add item</button>
  </div>
<div>

解决方案

This jQuery code will scroll to put the bottom of the element at the bottom of the window. I basically just get the top position of the element to scroll to, then add the height of the element to the top position to determine the bottom position. Subtracting the window height from the bottom position value, then scrolling to the resulting value will put the bottom of the element at the bottom of the window. If you want the bottom of the element to be at the top of the window (truly scrolling to the bottom of the element, but it will be out of the viewport), just scroll to divBot instead.

$('button').on('click', function() {
  var wHeight = $(window).height(),
    divTop = $('#one').offset().top,
    divHeight = $('#one').outerHeight(),
    divBot = divTop + divHeight;
  
  $('html, body').animate({
    scrollTop: (divBot - wHeight)
  }, 2000);
})

div {
  height: 200vh;
  border-bottom: 5px solid black;
}
#one {
  border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><button>click</button></div>
<div id="one"></div>
<div></div>

这篇关于滚动窗口到元素底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！