HTML中的滚动条有哪些使用技巧


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来HTML中的滚动条有哪些使用技巧,HTML中的滚动条的哪些使用技巧的注意事项有哪些,下面就是实战案例,一起来看一下。

我说一个现象大家一定常见 ,就是在网页中删除一些东西的时候滚动条往往还在删除东西之前的位置,而不是非常不人性化的跑到那一页的顶部,那么这是怎么实现的呢?其实办法很简单,只需要在.aspx的源码中的顶端部分加上 MaintainScrollPositionOnPostback ="true"即可。
以上这个现象就是在学习牛腩新闻发布系统的时候遇到的,下面就给大家来分享一些其他关于html滚动条的使用技巧
(1)隐藏滚动条

1

2

3

<bodystyle="

overflow-x

:hidden;overflow-y:hidden">

(2)如何在单元格或图层中出现滚动条

1

<divstyle="width:200px;height:200px;overflow-x:auto;overflow-y:auto;"></div>


(3)javascript改变框架中滚动条的样式,比如改变颜色、改为平面效果等

1

2

3

4

5

6

7

8

9

<STYLE>

BODY {SCROLLBAR-FACE-COLOR: #ffcc99;

SCROLLBAR-HIGHLIGHT-COLOR: #ff0000;

SCROLLBAR-SHADOW-COLOR: #ffffff;

SCROLLBAR-3DLIGHT-COLOR: #000000;

SCROLLBAR-ARROW-COLOR: #ff0000;

SCROLLBAR-TRACK-COLOR: #dee0ed;

SCROLLBAR-DARKSHADOW-COLOR: #ffff00;}

</STYLE>

说明:
scrollbar-3dlight-color:color;设置或检索滚动条亮边框颜色;
scrollbar-highlight-color:color;设置或检索滚动条3D界面的亮边颜色;
scrollbar-face-color:color;设置或检索滚动条3D表面的颜色;
scrollbar-arrow-color:color;设置或检索滚动条方向箭头的颜色;当滚动条出现但不可用时,此属性失效;
scrollbar-shadow-color:color;设置或检索滚动条3D界面的暗边颜色;
scrollbar-darkshadow-color:color;设置或检索滚动条暗边框颜色;
scrollbar-base-color:color;设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。
scrollbar-track-color:color;设置或检索滚动条的拖动区域颜色
备注:
color为你要设置的颜色代码,可以是16进制的,比如#FF0000,可以是以RGB表示的,比如rgb(255,0,255);设置滚动条样式的时候不必要把所有的属性都用上才会生效。
(4)javascript中的页面元素定位
clientX、clientY是鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0, clientY=0;
offsetX、offsetY是鼠标当前相对于网页中的某一区域的位置,当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0;
screenX、screenY是鼠标相对于用户整个屏幕的位置;
x、y是鼠标当前相对于当前浏览器的位置
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离(因为有滚动条的产生,所以目前页面可见内容是不定的)。
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
left:对象相对于页面的X坐标。
top:对象相对于页面的Y坐标
(5)屏蔽选择,右键等
<body oncontextmenu=self.event.returnValue=falseonselectstart="return false">
下面的这个小例子是 实现滚动条根据窗体的大小自动设置

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

<SPAN style="FONT-SIZE: 18px"><html>

<head>

<style type="text/css">

&nbsp; .TopDIV

&nbsp; {&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp; position:absolute;

&nbsp;&nbsp;&nbsp;&nbsp; left:130px;

&nbsp;&nbsp;&nbsp;&nbsp; top:10px;

&nbsp;&nbsp;&nbsp;&nbsp; width:105;

&nbsp;&nbsp;&nbsp;&nbsp; height:30;

&nbsp;&nbsp;&nbsp;&nbsp; overflow-x:hidden;

&nbsp;&nbsp;&nbsp;&nbsp; overflow-y:auto;

&nbsp;&nbsp;&nbsp;&nbsp; float: right;

&nbsp;&nbsp;&nbsp;&nbsp; border-style.:solid;

&nbsp;&nbsp;&nbsp;&nbsp; border-width:;

&nbsp;&nbsp;&nbsp;&nbsp; border-color:red

&nbsp; }

&nbsp; .LeftDIV

&nbsp; {&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp; position:absolute;

&nbsp;&nbsp;&nbsp;&nbsp; left:10px;

&nbsp;&nbsp;&nbsp;&nbsp; top:40px;

&nbsp;&nbsp;&nbsp;&nbsp; width:120;

&nbsp;&nbsp;&nbsp;&nbsp; height:60;

&nbsp;&nbsp;&nbsp;&nbsp; overflow-x:hidden;

&nbsp;&nbsp;&nbsp;&nbsp; overflow-y:hidden;

&nbsp;&nbsp;&nbsp;&nbsp; float: right;

&nbsp;&nbsp;&nbsp;&nbsp; border-style.:solid;

&nbsp;&nbsp;&nbsp;&nbsp; border-width:;

&nbsp;&nbsp;&nbsp;&nbsp; border-color:yellow

&nbsp; }

&nbsp; .MainDIV

&nbsp; {&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp; position:absolute;

&nbsp;&nbsp;&nbsp;&nbsp; left:130px;

&nbsp;&nbsp;&nbsp;&nbsp; top:40px;

&nbsp;&nbsp;&nbsp;&nbsp; width:120;;

&nbsp;&nbsp;&nbsp;&nbsp; height:80;

&nbsp;&nbsp;&nbsp;&nbsp; overflow-x:auto;

&nbsp;&nbsp;&nbsp;&nbsp; overflow-y:auto;

&nbsp;&nbsp;&nbsp;&nbsp; float: right;

&nbsp;&nbsp;&nbsp;&nbsp; border-style.:solid;

&nbsp;&nbsp;&nbsp;&nbsp; border-width:;

&nbsp;&nbsp;&nbsp;&nbsp; border-color:blue

&nbsp; }

</style>

<script type="text/javascript" language="javascript">

function setStyle()

{

//145的由来LeftDiv的left+width+15(15是滚动条的宽度)

document.getElementById("a").style.width=document.body.clientWidth - 145;

//130的由来LeftDiv的left+width

document.getElementById("c").style.width=document.body.clientWidth - 130;

//55的由来TopDIV的top+height+15(15是滚动条的宽度)

document.getElementById("b").style.height=document.body.clientHeight - 55;

//40的由来TopDIV的top+height

document.getElementById("c").style.height=document.body.clientHeight - 40;

}

</script>

&nbsp;

</head>

<body onresize="setStyle();" onLoad="setStyle();">

&nbsp;

<div id='a' class="TopDIV">

1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

</div>

&nbsp;

<div id='b' class="LeftDIV">

1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

</div>

<div id='c' onscroll="document.getElementById('b').scrollTop = this.scrollTop;document.getElementById('a').scrollLeft = this.scrollLeft;"

&nbsp;class="MainDIV">

1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ

</div>

</body>

</html>

滚动条的使用是很常见的,它的相关知识也是相当的多,希望自己能在不断的学习中,不断的总结,使自己的学习能力和学习效率能有一定的提高.

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

input的文本框怎么做到和img验证码

html如何实现鼠标悬停提示A标签内容

怎样使用trigger方式实现不用点击file类型的input弹出文件选择对话框

以上就是HTML中的滚动条有哪些使用技巧的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html5中一些可以优化的细节介绍

Html怎么设置只读

Html怎么设置水平线与文字的距离

Html q标签怎么用

Html中的muted是什么意思

Html怎么取消滚动

Html header标签怎么用

Html如何设置单元格颜色

Html除了maxlength如何限制长度

Html只读属性是什么

更多相关阅读请进入《Html》频道 >>




JavaScript 从入门到项目实践
书籍

JavaScript 从入门到项目实践

清华大学出版社

本书采取“基础知识→核心应用→核心技术→高级应用→行业应用→项目实践”的结构和“由浅入深,由深到精”的学习模式进行讲解。全书共35章,不仅介绍了HTML、CSS、对象、函数、事件等JavaScript语言的基础知识,而且深入介绍了jQuery、客户端、服务器端、数据存储等核心技术。



打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...