div利用overflow产生能上下拉动的滚动条

ゝ一世哀愁。 2022-08-06 11:30 159阅读 0赞

<div id="box"  
style="background:pink;overflow-y:scroll;word-break:break-all;width:150px;height:150px">  
 dddddddddddddddddddddddddddddddddddddddddddddddasssssssss  
 sssssssssssssssssssssssssssssssssssssssssssssssssssssssdddd  
 jjjjjjjjjjjjjjjjjjjjjjjkkkkkkkkkkkkkkkkkkkkkkkkkkkkk  
  ggfdgdfgfffffdddddddddddddddfddddddddddddddddddddddddddddddddddddddd

</div>

1.overflow-y:scroll在y的方向上有滚动条。其中overflow-x也可以这样。

2.word-break:break-all;遇到边界就自动换行，这个非常重要，没有它的话1就实现不了。

3.width和height属性也是不可以缺少的，因为它提供了边界。

![Center][]

对y轴是的滚动条进行精确定位(在上面代码的基础上)：

<script>  
        window.onload = function()\{  
    var box = document.getElementById('box');  
box.scrollTop = 50;  
                 alert(box.scrollTop);  
\};  
</script>

scrollTop属性可以对滚动条进行精确定位，即能查找滚动条的位置和设置滚动条的初始位置。

scrollLeft属性也可以进行控制。

![Center 1][]

[Center]: /images/20220806/db2050a7ba7b4386876dad5a0b55651f.png
[Center 1]: /images/20220806/41cddd6553894472807e72ce60130dfd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读

相关 div 如何加滚动条

iv 加[滚动条][Link 1]的两种方法：一、 <div style=" overflow:scroll; width:400px; height:400px;...

小咪咪/ 2024年04月18日 22:12/ 0 赞/ 105 阅读

相关给div添加滚动条

<div style=" overflow-y:auto; overflow-x:auto; width:400p

野性酷女/ 2023年10月06日 17:30/ 0 赞/ 104 阅读

相关隐藏div滚动条

溢出隐藏，写两个div，高度都固定，外面的固定宽度overflow: hidden;里面的div宽度比外面的稍宽，最好算好滚动条的宽度，[overflow-y][]: auto

刺骨的言语ヽ痛彻心扉/ 2023年06月19日 02:16/ 0 赞/ 80 阅读

相关 DIV实现纵向滚动条

DIV实现纵向滚动条overflow-y:scroll的使用， 1.首先设置固定div的宽高 2.overflow-y:scroll 如果设置overflow:auto

约定不等于承诺〃/ 2022年08月18日 02:18/ 0 赞/ 285 阅读

相关 div利用overflow产生能上下拉动的滚动条

<div id="box" style="background:pink;overflow-y:scroll;word-break:break-all;width:150p

ゝ一世哀愁。/ 2022年08月06日 11:30/ 0 赞/ 160 阅读

相关 div 滚动条同步控制 div 滚动条滚动

<html> <head> <title>div scroll</title> <mce:style type="text/css"><!-- DIV \{width:200;

系统管理员/ 2022年07月13日 11:17/ 0 赞/ 399 阅读

相关 overflow: scroll隐藏滚动条的问题

最近用vue写wap站的时候遇到了微信打开页面滚动条无法隐藏的问题。对于隐藏滚动条，我们最常用的方法首先是： 1、使用以下CSS可以隐藏滚动条： .contai

傷城~/ 2022年05月20日 08:19/ 0 赞/ 303 阅读

相关 ionic1开发之ion-scroll仅水平滚动时不能上下拉动

原文出处：[https://www.jianshu.com/p/704926419e14][https_www.jianshu.com_p_704926419e14] 随着项

桃扇骨/ 2022年05月15日 11:35/ 0 赞/ 169 阅读

相关 jQuery 拉动滚动条到底部加载数据

代码很简单： <div id="assDiv" style="height: 350px;overflow-y: auto;" > </div

向右看齐/ 2022年04月14日 02:42/ 0 赞/ 418 阅读

相关 Overflow实现隐藏滚动条的同时又可以滚动

.scroll-list ul{ white-space: nowrap; -webkit-overflow-scrolling: to

女爷i/ 2022年03月17日 05:38/ 0 赞/ 386 阅读