元素显示在可视区域

scrollIntoView

DOM的滚动

DOM规范中并没有规定各浏览器需要实现怎样的滚动页面区域,各浏览器实现了相应的方法,可以使用不同的方式控制页面区域的滚动。这些方法作为HTMLElement类型的扩展存在,所以它能在所有元素上使用。

1、scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐。-------目前各浏览器均支持

2、scrollIntoViewIfNeeded(alignCenter) 只在当前元素在视窗的可见范围内不可见的情况下,才滚动浏览器窗口或容器元素,最终让当前元素可见。如果当前元素在视窗中可见,这个方法不做任何处理。如果将可选参数alignCenter设置为true,则表示尽量将元素显示在视窗中部(垂直方向)------Safari、Chrome实现了这个方法

3、scrollByLines(lineCount) 将元素的内容滚动指定的行数的高度,lineCount的值可以为正值或是负值。---Safari、Chrome实现了这个方法

4、scrollByPages(pageCount) 将元素的内容滚动指定的页面的高度,具体高度由元素的高度决定。---Safari、Chrome实现了这个方法

 

scrollIntoView()和scrollIntoVIewIfNeeded()作用的是元素的窗口,而scrollByLines()、scrollByPages()影响元素自身,下面是几个示例:

//将页面主体滚动5行

document.body.scrollByLines(5);

 

//确保当前元素可见

document.getElementById(“test”).scrollIntoView();   //

//true:对象的顶端与当前窗口的顶部对齐

//false:对象的底端与当前窗口的顶部对齐

 

//确保只在当前元素不可见的情况下才使其可见

document.getElementById(“test”).scrollIntoViewIfNeeded();

 

//将页面主体往回滚1页

doument.body.scrollByPages(-1);

由于只有scrollIntoView被各浏览器均支持,所以这个方法最为常用

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以通过计算元素的高度和容器的高度,来判断元素是否超出可视区域。如果超出了可视区域,可以通过动态添加一个新的元素展示多余的内容。 以下是一个简单的实现过程: 1. 给容器元素设置一个固定的高度和 `overflow: hidden` 样式,这样超出容器高度的内容就会被隐藏起来。 2. 在容器元素下面添加一个新的元素,用来展示多余的内容。可以给这个新元素设置一个默认的高度和 `overflow: hidden` 样式,让它默认情况下不显示多余的内容。 3. 使用 JavaScript 计算容器元素和其子元素的高度,并比较它们的差值。如果子元素的高度大于容器元素的高度,说明元素超出了可视区域。 4. 如果元素超出了可视区域,就可以动态地设置新元素的高度,并将多余的内容插入到新元素中。 下面是一个示例代码: ```html <div class="container"> <div class="content"> <!-- 此处是需要展示的内容 --> </div> <div class="more-content"></div> </div> ``` ```css .container { height: 200px; overflow: hidden; } .more-content { height: 0; overflow: hidden; } ``` ```javascript const container = document.querySelector('.container'); const content = document.querySelector('.content'); const moreContent = document.querySelector('.more-content'); const containerHeight = container.offsetHeight; const contentHeight = content.offsetHeight; if (contentHeight > containerHeight) { const diff = contentHeight - containerHeight; moreContent.style.height = `${diff}px`; moreContent.innerHTML = content.innerHTML; } ``` 注意:这只是一个简单的实现方式,对于一些复杂的场景可能需要进行更加细致的处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值