首页 > 其他分享 >Js中元素滚动问题

Js中元素滚动问题

时间:2022-09-22 19:37:10浏览次数:51  
标签:滚动 高度 元素 clientHeight ele scrollTop Js

1、如何判断一个元素是否可以滚动

clientHeight指的是不出现滚动条的情况下所需要最小高度

scrollHeight指的是元素内容高度,包括可视部分和溢出部分

如果元素内容在没有滚动条情况下完全展示,那么scrollHeight==clientHeight

clientHeight=css height+css padding- height of horizontal scrollbar

因此

我们可以

function eleCanScroll(ele) {

if (!ele instanceof HTMLElement) {

return;

}

if (ele.scrollTop > 0) {

return true;

} else {

ele.scrollTop++;

// 元素不能滚动的话,scrollTop 设置不会生效,还会置为 0

const top = ele.scrollTop;

// 重置滚动位置

top && (ele.scrollTop = 0);

return top > 0;

}

}

2、

ScrollTop 可读写 指的是可视位置距离顶部距离

ScrollHeight指的是可滚动元素的高(有部分不可见的那个高度)

ScrollLeft 可读写,左侧

ScrollWidth 同上 宽

clientHeight 纯高度

offsetHeight 高度包括边框和外边距

clientTop 理解为边框的高度

offsetTop 子元素到父元素边框的距离

3、

ScrollTo(x,y) 滚动到

ScrollBy (x,y)滚动距离,可以正负

 

标签:滚动,高度,元素,clientHeight,ele,scrollTop,Js
From: https://www.cnblogs.com/xietianjiao/p/16720603.html

相关文章

  • js返回点击事件返回页面顶部
     <divclass="top"></div> .top{        position:fixed;        right:0;        bottom:20px;   ......
  • js定时器动态显示时间
     //time    lettime=document.getElementsByClassName('time')[0];    functionstartTime(){      vartoday=newDate();//定......
  • vue组件系列-列表左右箭头滚动(vue3+ts)
    <template><divclass="list-wrapper"ref="allListRef"><divv-if="showArrow&&listSource.length>minArrowItemsCount"@click="scrollLeft"......
  • 前端Nodejs-Day36
    package.json属性:name为npm包名,version为包版本,main为文件入口,description为包介绍,keywords为搜索关键词,license为开源许可协议(一般为ISC) 发布包:cd到包的根目录下,利用np......
  • 【前端】js实现JSON字符串格式化显示
    一、效果二、代码JSON.parse:把JSON字符串转换为JSON对象JSON.stringify:把JSON对象转换为有缩进的JSON字符串格式<!--JSON格式化工具--><template><divcl......
  • Spring Boot+Vue从零开始搭建系统(一):项目前端_Vuejs环境搭建
    参考: vue.js-SpringBoot+Vue从零开始搭建系统(一):项目前端_Vuejs环境搭建_个人文章-SegmentFault思否 前言博主本身是一直从事Java后端开发,一直想独立开发一套完......
  • js取补码并转换为2进制
    (-1>>>0).toString(2)//返回结果'11111111111111111111111111111111'(4>>>0).toString(2)//返回结果 '11111111111111111111111111111100'如何计算一个32位2进制......
  • js 手写日历 改变年 改变月
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"conten......
  • 原生js jq选项卡
    html  <divclass="regardc">    <divclass="gw_b_box2">      <divclass="gw_box_tit2on">        <spanclass="sh3ma......
  • vue3+jsx做函数组件
    组件部分:import{h}from"vue";constTest1=(props,context)=>{//context.slots类似react的props.children,但是这里代表插槽,ccname是具名插槽的名字,没有......