div层滑动条自动显示并固定设置滑动条默认滑动块位置

最新推荐文章于 2023-01-27 19:57:51 发布
最新推荐文章于 2023-01-27 19:57:51 发布
阅读量3.1k 收藏
点赞数
分类专栏： DIV+CSS 文章标签： div border function table class 通讯
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/foamflower/article/details/4286161
版权

搜索结果展示页面需要一个分类统计结果数展现树的层，同事就给了我这样一个测试模板，先存一下，以防以后再用到，^_^

<html>
<head>
<style>
<!--
.ViewFrame{ font-size:12px; font-weight:normal; border:#828790 1px solid; overflow:hidden; text-overflow:ellipsis; word-break:keep-all; word-wrap:normal; }
.ViewFrame tbody td{ font-size:12px; font-weight:normal; overflow:hidden; text-overflow:ellipsis; word-break:keep-all; word-wrap:normal; }
.ViewFrame tbody td div{ width:100%; height:100%; overflow-x: auto; overflow-y: auto; scrollbar-face-color:#ececed; scrollbar-3dlight-color:#979797; scrollbar-darkshadow-color:#eaeaea; scrollbar-track-color:#f0f0f0;}
-->
</style>
</head>
<body οnlοad='setScrollTop(0,0)'>
<table width=100% height=100% cellpadding="0" cellspacing="0" border="0">
<tr>
<td height=200 colspan=3></td>
</tr>
<tr>
<td width=200></td>
<td>
 <table class=ViewFrame width=100% height=100% cellpadding="0" cellspacing="0" border="0">
   <tr> 
     <td valign=top><div id=FolderView>朝鲜中央通讯社称，<br>该国“在5月25日这天成功进行了另一次地下核试验，<br>
     作为旨在从各方面加强自我防卫核威慑的措施的一部分”。<br>
朝中社称，此次核试验将“捍卫我们的主权和社会主义，<br>
确保朝鲜半岛及其周边地区的和平和安全”。<br>
法新社称，朝中社发出的这条只有4段的消息没有<br>透露核试验的地点。韩联社援引韩国执政党高官的话说，<br>
朝鲜咸镜北道吉州地区发生了震级4.5的地震，<br>地质资源研究院推测<br>是人工地震。<br>

</div></td>
   </tr>
 </table>
</td>
<td width=1000></td>
</tr>
<tr>
<td height=300 colspan=3></td>
</tr>
</table>

</body>

<script type="text/javascript">

  //设置滑动条默认打开滑动块位于最上面，最左边
    function setScrollTop(x,y){
     var  objScroll = document.getElementById("FolderView");
     if(objScroll){

         objScroll.scrollLeft =x;
         objScroll.scrollTop =y;
       }
    }

</script>

</html>

foamflower
关注
专栏目录
原生JS移动端导航 可滑动 自动剧中 滚动固定顶部效果
weixin_42105261的博客
04-06 1328
类似腾讯视频的导航效果，添加了滚动居顶，适用于大部分需要滚动的导航页面 这里只做了单向控制，切换导航只能页面数据重新加载，不做页面滚动切换 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt...
DIV 滚动条的自动显示隐藏
预立数据科技
09-27 3243
<html> <head> <style> .Div { white-space:nowrap; width:150px; height:150px; overflow:auto; } </style> </head> <body> <div class="Div"&g...
当div中的组件超过高度时，显示滑块（el-tree超出高度时，显示滑块）
weixin_38345306的博客
05-04 801
当div中的组件超过高度时，显示滑块（el-tree超出高度时，显示滑块）
设置div默认滚动条
weixin_30500663的博客
08-07 189
https://blog.csdn.net/tanmuxue/article/details/53155918 转载于:https://www.cnblogs.com/liaolongfei/p/11316688.html
html块的位置设置,滚动条初始位置 vb 怎么设置滚动块的初始位置
weixin_36225384的博客
06-04 1222
jquery怎么设置滚动条的位置jquery如何让滚动条默认在最底部？js控制div内的滚动条的位置div内有滚动条,div的宽度超出了浏览器的宽度,所以,右侧的滚动条只有在拖通过div的scrollTop变动控制垂直滚动条位置。 通过div的scrollLeft变动控制水平滚动条位置。 示例 //d1是外层div，带滚动条 2222 document.getElementById('d1').s...
给div添加横向的滚动条
impossible1994727的博客
04-07 1571
*{ margin: 0; padding: 0; } .div1{ height: 100px; width: 600px; background: aqua; } ul,li{ list-style: none; } ul{ overflow: hidden; overflow-x: auto; white-space: nowrap; } li{ heig
支持移动端的jQuery滑动条拖动横向图片滚动特效
01-02
在本文中，我们将深入探讨如何实现一个支持移动端的jQuery滑动条拖动横向图片滚动特效。这个功能是通过使用jQuery插件mCustomScrollbar来完成的，它为网站提供了丰富的自定义滚动条效果，并且能够适应各种设备，包括...
js实现鼠标滑动到某个div禁止滚动
10-14
1. 首先定义了一个div元素，并通过CSS对其进行了样式设置，使其能够成为目标区域。 ```css #wrap{ position:absolute; top:200px; background:#000000; font-size:40px; width:50vw; text-align:center; ...
移动端jQuery修正Web页面滑动时div问题的两则实例
10-22
**实例一：解决顶部固定div滑动闪动问题** 在移动端，当页面中有一个固定在顶部的div（例如导航栏）时，用户上滑屏幕时可能会出现闪动的情况。这个问题通常是由于在处理页面滚动时CSS样式更新的延迟导致的。传统的...
基于JQUERY的滑动条
04-08
滑动条在实际项目中的应用广泛，例如音量控制、亮度调节、时间选择、进度条显示等。通过结合其他JQUERY插件或自定义逻辑，可以实现更多高级功能，如数据绑定、动态更新等。 总结，基于JQUERY的滑动条组件是一个强大...
jQuery鼠标滚动条到页面底部浮动层滑动弹出信息
10-31
在网页设计中，有时我们需要实现一种效果：当用户滚动页面至底部时，一个浮动层会自动弹出显示信息。这种功能常用于展示广告、提示消息或者加载更多内容等。jQuery库提供了一种简单且强大的方式来实现这样的交互效果...
html怎么让页面滑动条,怎么让html页面固定住。失去滚动条
weixin_33359523的博客
06-03 809
写个简单的小demo关键点是设置html中body的overflow属性为hiddenDocument.header{width: 100%;height: 100px;background-color: green;display: flex;justify-content: center;align-items: center;}.main{background-color: yellow;w...
设置滚动条的默认位置
weixin_43390711的博客
01-27 2299
设置滚动条的默认位置
CSS 滚动条始终默认显示和修改placeholder的默认颜色
weixin_47353884的博客
12-22 2854
原理和更改多选框的样式一样,都是先隐藏原先的 再后写一个新样式
怎么样在div+css中设置一个div的框并出现滚动条
热门推荐
evilcry2012的专栏
12-01 3万+
怎么样在div+css中设置一个div的框并出现滚动条 50 怎么样在div+css中设置一个div，给他设置宽和高，并让他出现滚动条 匿名 | 浏览 15970 次 |举报 我有更好的答案 推荐于2017-06-16 14:41:29 最佳答案 这里是你要显示的内容  本回答由网友推荐 举报| 答案纠错 | 评论(3
怎么让div内容超出后自动显示滚动条
ajdhakj6的博客
01-15 2206
怎么让div内容超出后自动显示滚动条
滚动条滚动时头部导航栏固定在页面顶部的几种简单方法
juxiaozheng的博客
05-11 2万+
一、使用css直接用固定定位position: fixed。 适合使用在导航栏有固定高度，避免导航栏下面的内容被遮盖。下面的盒子就需要调整top的距离。 示例代码： <style> *{ margin: 0; padding: 0; } p{ height: 500px; } section{ padding-top: 40px; } div{ height: 40px; width: 100%; color: white; background-color: crims
html实现向下滑动后出现导航条,jQuery 页面向下滚动时出现固定位置导航条
weixin_35000379的博客
06-05 743
CSS语言：CSSSCSS确定@import url(http://fonts.googleapis.com/css?family=Quicksand);body {margin: 0;padding: 0;background: #e6e6e6;font-family: Quicksand, sans-serif;}#arlina {background: #fff;position: rela...
jquery mobile怎么设置slider滑动条轨道颜色形状
最新发布
06-06
您可以通过CSS来自定义jQuery Mobile中slider的轨道颜色和形状。 以下是一个示例代码，演示如何设置slider滑动条轨道的颜色和形状： ```html <div data-role="fieldcontain"> <label for="slider">Slider:</label> <select name="slider" id="slider" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> </div> ``` 在上面的示例中，我们没有设置`data-track-theme`和`data-thumb-theme`属性。这意味着我们将使用默认的轨道和滑块颜色。 现在，我们可以使用CSS样式来自定义slider的样式。例如，您可以使用以下CSS样式来设置slider滑动条轨道的颜色和形状： ```css .ui-slider-track { background-color: #ccc; height: 5px; border-radius: 25px; } ``` 在上面的示例中，我们使用CSS设置了滑动条轨道的背景颜色为灰色，高度为 `5px`，圆角为 `25px`。您可以根据需要自定义slider的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值