dom元素的滚动（如何实现点击展开更多功能）

滚动

窗口的尺寸和滚动

窗口可视高度和宽度

document.documentElement对应的标签是html

document.documentElement.clientHeight()
document.documentElement.clientwidth()

alert( window.innerWidth ); // 整个窗口的宽度
alert( document.documentElement.clientWidth ); // 窗口减去滚动条的宽度

一般使用去除掉滚动条的document.documentElement.clientwidth()

兼容性更好的获取当前文档/页面水平方向已滚动的像素值，使用

console.log(window.pageXOffset)
console.log(window.pageYOffset)

如何将窗口按照我们想的偏移量滚动呢？

Window.scrollBy(x,y)

// 方法 scrollBy(x,y) 滚动页面至相对于现在位置的 (x, y) 位置。例如，scrollBy(0,10) 页面向下滚动 10px

滚动到窗口的某个坐标

window.scrollTo(pageX,pageY)

// 方法 scrollTo(pageX,pageY) 滚动页面至相对于文档的左上角的 (pageX, pageY) 位置
// 就好像设置 scrollLeft/scrollTop,回到顶部, 我们可以用 scrollTo(0,0)。

当前元素滚动到窗口的顶部或者底部

        btn3.addEventListener('click',function() {
            // 当前元素跳转到窗口顶部
            this.scrollIntoView(top)
            top = !top
        })
        btn4.addEventListener('click',function() {
            // 当前元素跳转到窗口顶部
            this.scrollIntoView(top)
            top = !top
        })

禁止滚动

overflow: hidden;

这个方法的缺点是会使滚动条消失。如果它占用了一些空间，它原本占用的空间就会空出来，使元素本身的内容“跳”出来填满空出来的空间里。

这看起来就有点怪怪的。但我们可以解决这个问题：通过对比冻结前后的clientWidth如果在 clientWidth 增加（滚动条消失）时，将 padding 添加到 document.body 取代滚动条来保持内容宽度不变

元素的滚动和尺寸

offsetleft 和 offsetTop与offsetParent

offsetParent是最近的祖先元素，这里的祖先元素是指以下几种情况:
1. CSS 定位（position 为 absolute、relative 或 fixed），
2. 或者 <td>、<th>、<table>，
3. 或者 <body>
如果第一个外层没有符合以上情况，不称为有效祖先元素，继续往上寻找

offsetTop 和 offsetLeft 是相对于其第一个祖先元素的x/y坐标

当自身属于以下情况的时候offsetParent为null
1. 未显示的元素（display:none 或者不在文档中）。
2. <body> 与 <html>。
3. position:fixed 的元素。
offsetWidth和offsetHeight
- offsetWidth = 390 — 外部宽度，计算方法是内部 css 宽度（300px）加上内填充（2 * 20px）和边框宽度（2 * 25px）。
- offsetHeight = 290 — 外部高度。
clientLeft 和 clientTop

元素的边框宽度和高度
clientHeight和clientWidth

测算出可见区域的内边距和内容宽度（不会将滚动条计算在内），如果没有内边距内容区域就等于clent...的值

scrollWidth和scrollHeight包括可见区域和滚动的隐藏的高度或者宽度

实现点击展开全文的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap {
            position: relative;
            width: 300px;
            border: 1px solid red;
        }
        .content {
            height: 150px;
            width: 100%;
            overflow: hidden;
        }

        .expand {
            position: absolute;
            width: 100%;
            top: 152px;
            text-align: center;
        }
        .expand p {
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="content">
        <p>
            静夜思
            床前明月光，
            疑是地上霜。
            举头望明月，
            低头思故乡。
        </p>
        <p>
            国风·周南·关雎
            先秦：佚名

            关关雎鸠，在河之洲。窈窕淑女，君子好逑。
            参差荇菜，左右流之。窈窕淑女，寤寐求之。
            求之不得，寤寐思服。悠哉悠哉，辗转反侧。
            参差荇菜，左右采之。窈窕淑女，琴瑟友之。
            参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。
        </p>
        <p>
            上元夜六首·其一
            唐代：崔液

            玉漏银壶且莫催，铁关金锁彻明开。
            谁家见月能闲坐？何处闻灯不看来？
        </p>
    </div>
    <div class="expand">
        <p>点击展开全文</p>
    </div>
</div>

</body>
<script>
    var $ = function (elem) {
        return document.querySelector(elem)
    }
    var content = $('.content')
    var expand = $('.expand')

    expand.addEventListener('click',function () {
        console.log(content.scrollHeight)
        content.style.height = `${content.scrollHeight}px`
        expand.style.display = 'none'
    })

</script>
</html>

scrollLeft和scrollTop

元素隐藏部分的高度和宽度，滚了多少宽度和高度，它是可以直接被修改的

修改元素的这两个属性可以使得浏览器滚动元素

scrollTop 设置为0 和Infinity使得元素分别滚动到顶部和底部

posted on 2019-08-07 15:55 2481 阅读(323) 评论(0) 编辑收藏举报

刷新页面返回顶部

你好，GeekDD~

dom元素的滚动（如何实现点击展开更多功能）

滚动

窗口的尺寸和滚动

元素的滚动和尺寸

导航

公告