2.24 js处理内嵌div滚动条

前言
前面有篇专门用js解决了浏览器滚动条的问题，生活总是多姿多彩，有的滚动条就在页面上，这时候又得仰仗js大哥来解决啦。
一、内嵌滚动条
1.下面这张图就是内嵌div带有滚动条的样子，记住它的长相。

2.页面源码如下：（老规矩：copy下来，用文本保存下来，后缀改成.html,用浏览器打开）

<!DOCTYPE html>
<meta charset="UTF-8"> <!-- for HTML5 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <html> 　　<head> 　　　　<style type="text/css"> 　　　　　　div.scroll 　　　　　　{ 　　　　　　　　background-color:#afafaf; 　　　　　　　　width:500px; 　　　　　　　　height:100px; 　　　　　　　　overflow:auto; 　　　　　　} 　　　　</style> 　　</head>

 　　<body> 　　　　<p>个人微信公众号：yoyoketang</p> 　　　　<p>这是一个内嵌的div滚动条</p> 　　　　<div id="yoyoketang" name="yoyo" class="scroll">这是一个内嵌div:民国年间，九大家族镇守长沙，被称为“九门提督”。这九门势力庞大，外八行的无人不知，无人不 晓，几乎所有冥器，流出长沙必然经过其中一家。1933年秋，一辆神秘鬼车缓缓驶入长沙火车站，九门之首“张大佛爷”张启山身为布防官，奉命调查始末。张启山与八爷齐铁嘴一路探访，发现长沙城外有一座疑点重重的矿山，一直被日本人窥伺。 为破解矿山之谜，张启山求助同为九门上三门的戏曲名伶二月红，无奈二月红虽出身考古世家，却心系重病的妻子丫头，早已金盆洗手。张启山为了国家大义和手足之情，北上去往新月饭店为二月红爱妻求药。在北平，张启山邂逅了新月饭店的大小姐尹新月，并为尹新月连点三盏天灯，散尽家财。尹新月帮助张启山等人顺利返回 长沙，二人暗生情愫。二月红爱妻病入膏肓，服药后不见好转，最终故去。二月红悲伤之余却意外发现家族祖辈与矿山亦有重大关联，于是振作精神，决定与张启山联手，解开矿山之谜zhegedancihenchanghenchangchangchangchangchanchanchanchangchangchangchancg　　　　</div> 　　</body> </html>

二、纵向滚动

1.这个是div的属性：<div id="yoyoketang" name="yoyo" class="scroll">

2.这里最简单的通过id来定位，通过控制 scrollTop的值来控制滚动条高度

3.运行下面代码，观察页面是不是先滚动到底部，过五秒再回到顶部。（get里面地址是浏览器打开该页面的地址）

三、横向滚动

1.先通过id来定位，通过控制scrollLeft的值来控制滚动条高度

四、用class属性定位
1.js用class属性定位，返回的是一个list对象，这里取第一个就可以了。
2.这里要注意了，element和elements有很多小伙伴傻傻分不清楚。

有时候很多元素属性都一样时候，就可以用复数定位，取对应的第几个就可以了。

转载于:https://www.cnblogs.com/lunvo/p/9183083.html

2.24 js处理内嵌div滚动条相关推荐

三维视频融合倾斜摄影模型开放c++源代码支持与java js交互内嵌web容器可用于雪亮工程等安防项目稳定流畅点卯系列
元宇宙的兴起,让以三维视频融合与三维投影融合为核心.以倾斜摄影和三维地图构筑的CIM作为托底的时空克隆引擎,成为时代的主流技术,以此打造了混合架构的魔镜平台济南用魔镜打造元宇宙城市,难道是真的? 开 ...
内嵌资源html,go 1.16 embed 实现资源文件(html, css, js等)内嵌
Golang 发布1.16,如今通过//go:embed 注解内嵌资源文件并打包到二进制文件,关于//go:embed的使用网上很多教程,我想也不需要我在此在啰嗦一遍,今天的重点:用go开发网站时候内 ...
纯JS解决内嵌iframe全屏（兼容IE/火狐/谷歌）
遇到一些政府/国企开发时经常遇到兼容IE的问题,给大家介绍一种我刚研究出的一种解决方案 1.代码 <!DOCTYPE html> <html lang="en"& ...
div中内嵌并排div的显示问题
在页面布局中,最常使用的就是div标签,经常会出现div中内嵌div的情形,这时,子div的排列就相当重要.下面推荐两种方式. ** 1. 当需要两个div并排显示,并拥有同一个父div时: ** & ...
java selenium div内嵌滚动条网页长截图发邮件
java selenium 网页内嵌滚动条截图发邮件主要问题下面展开说由于公司要求做一个接口,请求这个接口进行网页截图并发送邮件的功能,本来前期是用python写好了,but似乎不太符合要求,那 ...
Electron中实现通过webview实现内嵌网页并嵌入css样式和js脚本等
场景用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/a ...
内嵌式js微信扫码登录及自定义样式
关于微信扫码登录网站的功能介绍,请阅读官方文档[网站应用微信登录开发指南] 根据官方文档我们知道微信扫码登录有两种方式一种是跳转到一个大黑屏二维码界面进行扫码登录: (参见博客:PHP实现跳转式微信 ...
div内嵌p,div等块元素出现的问题
div内嵌p,div等块元素出现的问题 http://caiceclb.iteye.com/blog/428085 div内部块级元素,比如p,div,设置外间距(margin)的话会怎样.本来还纳闷 ...
vue watch 修改滚动条_vue实现滚动监听，点击瞄点平滑滚动，控制内嵌滚动条滚动...
滚动效果当页面滑动时,左边导航栏会自动定位到当前标题,一级标题展开,二级标题的字体变红色,字体前面有一个小图标. 上图........... Html代码 {{NItem1.ordered}} {{ ...

2.24 js处理内嵌div滚动条

2.24 js处理内嵌div滚动条

2.24 js处理内嵌div滚动条相关推荐

最新文章

热门文章