`
wxb880114
  • 浏览: 683529 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

div的滚动条设置

 
阅读更多
直接为div指定overflow属性为auto即可,但是必须指定div的高度,如下:

<div style="position:absolute; height:400px; overflow:auto">

</div>

如果要出现水平滚动条,则: overflow-x:auto

同理,垂直滚动条为: overflow-y:auto

如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative

例如:



<HTML>
<HEAD>
<TITLE>测试表格内的滚动条</TITLE>
</HEAD>

<BODY>
<table>
  <tr>
    <td>表格内的滚动条:</td>
    <td>
      <div id="wins"
        style="position:absolute;height:200;width:200;overflow:auto;background:#EEEEEE;">
        <p>pppppppppppppppppppppppppppppppppppppppppppppppppp </p>
        <p>pppppppppppppppppppppppppppppppppppppppppppppppppp </p>
        <p>ppppppppppppppppppppppppp </p>
        <p>ppppppppppppppppppppppppp </p>
        <p>ppppppppppppppppppppppppp </p>
        <p>ppppppppppppppppppppppppp </p>
        <p>ppppppppppppppppppppppppp </p>
        <p>ppppppppppppppppppppppppp </p>
        <p>ppppppppppppppppppppppppp </p>
        <p>ppppppppppppppppppppppppp </p>
        <p>ppppppppppppppppppppppppp </p>
        <p>ppppppppppppppppppppppppp </p>
      </div>
    </td>
  </tr>
  <tr>
    <td colspan="2" align="right">
      <span onmouseover='scrollb=setInterval("wins.scrollLeft-=10",100)'
                 onmouseout=clearInterval(scrollb)>向左</span>
            <span onmouseover='scrollb=setInterval("wins.scrollTop-=10",100)'
                        onmouseout=clearInterval(scrollb)>向上</span>
      <span onmouseover='scrollb=setInterval("wins.scrollLeft+=10",100)'
                 onmouseout=clearInterval(scrollb)>向右</span>
      <span onmouseover='scrollb=setInterval("wins.scrollTop+=10",100)'
                 onmouseout=clearInterval(scrollb)>向下</span>
    </td>
  </tr>
</table>
</BODY>
</HTML>
分享到:
评论

相关推荐

    DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏.docx

    ### DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏 #### 概述 在Web开发过程中,滚动条的样式和行为对于提升用户体验至关重要。通过CSS(层叠样式表),开发者可以自定义滚动条的外观、行为以及是否显示或隐藏。本...

    div滚动条 带滚动条的div div滚动条样式

    本篇文章详细介绍了 DIV 滚动条的样式设置,包括如何实现 DIV 滚动条、DIV 滚动条的样式设置和滚动条颜色属性。通过设置 `overflow` 属性和滚动条颜色属性,可以实现 DIV 元素的滚动条样式设置。

    div滚动条优化

    "div滚动条优化"这个主题主要关注如何在不牺牲滚动功能的前提下,通过CSS样式和JavaScript技术来美化或定制滚动条,使其更加符合现代网页的审美标准和用户体验需求。 首先,我们要了解默认滚动条的样式通常是浏览器...

    DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏.pdf

    ...

    Android手机版浏览器DIV滚动条失效解决方案

    在Android平台上,开发一款手机版浏览器时,可能会遇到一个常见的问题:在特定情况下,网页中的`div`元素的滚动条无法正常工作。这个问题通常是由于Android原生浏览器或自定义WebView组件的某些特性引起的。本文将...

    div滚动条样式一览-div+css设计网

    而当这些`div`元素中的内容超出其设定的宽度或高度时,滚动条就会出现,以帮助用户浏览不可见的部分。在本文中,我们将深入探讨如何使用CSS来定制`div`元素的滚动条样式,以提升网页的视觉效果和用户体验。 一、...

    jQuery实现将div的滚动条滚动到指定位置

    在网页开发中,jQuery是一个非常...总的来说,通过jQuery的`animate()`方法,我们可以轻松地实现div滚动条的动态控制,为用户提供更加友好的交互体验。这个功能在展示长列表、分页内容或者需要聚焦某个部分时特别有用。

    纯css实现table滚动条(纯css实现div滚动条)

    纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.

    jqueryDIV滚动条

    jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jsDIV滚动条jsDIV滚动条jsDIV滚动条

    让div滚动条初始化到最低位置的三种方法

    ### 让div滚动条初始化到最低位置的三种方法 在前端开发中,有时我们需要实现一个功能,即在向某个特定的`div`容器内添加新内容后,使该`div`的滚动条自动滚动到最底部,以确保新添加的内容能够立即呈现在用户的...

    网页局部div随滚动条置顶滚动

    网页局部div随滚动条置顶滚动是一种常见的网页交互设计,常用于新闻网站、电商页面或者任何需要突出显示特定内容的场景。这种效果使得用户在滚动页面时,某个div元素(通常包含重要信息或导航)始终保持在视口顶部,...

    DIV滚动悬浮层(滚动条动,层不动)

    通过这种方式,当页面滚动时,悬浮层会根据我们的需求进行动态调整,实现"滚动条动,层不动"的效果。 当然,实际的项目可能会更复杂,比如要考虑不同设备的响应式布局,或者添加动画效果等。但以上基础步骤已经涵盖...

    JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)

    本文将重点讨论三个常见的JS实用技巧:屏蔽错误、div滚动条设置以及背景图片位置的调整。 首先,我们来看如何使用JavaScript来屏蔽错误。在某些情况下,我们可能希望在遇到错误时提供一个友好的提示,而不是让...

    js DIV滚动条随机位置的设置技巧.docx

    js DIV 滚动条随机位置的设置技巧 在 Web 开发中,DIV 滚动条是非常常见的交互元素,而随机设置 DIV 滚动条的位置可以增加用户体验的随机性和趣味性。今天,我们将介绍如何使用 JavaScript 实现 DIV 滚动条的随机...

    滚动条,div滚动条,图层下拉条

    例如,我们可以通过设置`background-image`属性为图片URL,将滚动条滑块设计成具有特定图案或渐变效果。 JavaScript(可能在`script.js`或类似文件中)在某些情况下可能用于增强滚动条交互,例如添加动画效果、响应...

    div随滚动条上下滚动

    在网页设计中,"div随滚动条上下滚动"是一种常见的动态效果,通常用于实现固定定位或者跟随滚动的视觉效果。这种效果可以通过JavaScript库jQuery和原生JavaScript来实现,以增加用户体验,使某些元素如导航栏、侧...

    一款好看的DIV+CSS滚动条

    2. `-webkit-scrollbar-thumb`:用于定义滚动条滑块部分的样式,可以设置背景颜色、边框和圆角等。 3. `-webkit-scrollbar-track`:定义滚动条轨道的样式。 4. `-webkit-scrollbar-thumb:hover`:当滑块被鼠标悬停时...

    完美解决ASP.NET回传后div滚动条位置复位的问题

    ### 完美解决ASP.NET回传后div滚动条位置复位的问题 在ASP.NET开发过程中,经常遇到的一个问题是页面更新或回传后,原本已经滚动的`div`元素会自动复位到初始状态,这对于用户体验来说是十分不利的。本文将详细介绍...

    jquery定制div滚动条Scrollbar

    标题中的“jquery定制div滚动条Scrollbar”涉及到的是一个使用jQuery库来实现自定义滚动条功能的技术。在网页设计中,滚动条通常是浏览器默认样式,但通过jQuery插件,我们可以为div元素创建具有个性化外观和交互...

    页面出现滚动条的时候如何让滚动条不影响页面宽度

    此外,为了保持滚动条被隐藏时内容的正确显示,应该将滚动条出现时隐藏的多余空间也设置为隐藏,即设置tableContainer的overflow属性为hidden。这样一来,即使在某些情况下滚动条宽度被隐藏了,也不会影响表格的布局...

Global site tag (gtag.js) - Google Analytics