1. function ScrollDiv() {    
        var ex = document.getElementById("calm");  
            ex.scrollTop = ex.scrollHeight;   
     }

obj.scrollTop：滚动条距离顶部的位置
obj.scrollHeight：流动区域的高度

给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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JS控制DIV滚动条</title>

</head>

<script>

function scrollup()

{

document.getElementById('div1').scrollTop = document.getElementById('div1').scrollTop-25;

}

function scrolldown()

{

document.getElementById('div1').scrollTop = document.getElementById('div1').scrollTop+25;

}

function scrolltop()

{

document.getElementById('div1').scrollTop = 0;

}

function scrollbottom()

{

document.getElementById('div1').scrollTop = document.getElementById('div1').scrollHeight;

}

</script>

<style>

.div1

{

height:200px;

overflow-y:scroll;

width:400px;

border:solid 1px #ccc;

}

</style>

<body>

<div class="div1" id="div1"><br />

start<br />

<br /><br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

middle<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

end<br />

</div>

<input name="" type="button"  value="向上"/ onclick="scrollup();">

<input name="" type="button"  value="向下" onclick="scrolldown();"/>

<input name="" type="button"  value="顶"/ onclick="scrolltop();">

<input name="" type="button"  value="底" onclick="scrollbottom();"/>

</body>

</html>

如何定位到div滚动条的最底端的更多相关文章

  1. DIV设置滚动条在最底端

    网站聊天样式,无论添加什么内容div的滚动条都显示在最底端 将div添加滚动条,给div一定的高度 <div id='up' style='height:100px; width:400px;o ...

  2. Selenium2+python自动化26-js处理内嵌div滚动条

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

  3. FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条

    问题一:最简单的鼠标移过手变型的css要改了 cursor:pointer;/*FireFox(火狐)不支持cursor:hand*/ dw8下面自动出来的也没有hand这个属性了,标准的是point ...

  4. 2.24 js处理内嵌div滚动条

    2.24 js处理内嵌div滚动条 前言    前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦.一.内嵌滚动条    1.下面这张图 ...

  5. Selenium2学习（十八）-- js处理内嵌div滚动条

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

  6. Selenium2+python自动化26-js处理内嵌div滚动条【转载】

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

  7. div滚动条演示

    <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title& ...

  8. css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡

    pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...

  9. 【前端】webkit内核浏览器DIV滚动条样式修改和设置

    webkit内核浏览器DIV滚动条样式修改和设置 引言: 最近在做自己的小项目,为了设计出好看的页面费劲了心思,大到页面的整体布局,小到DIV的滚动条都不放过,以下是我通过查阅资料总结的webkit内 ...

随机推荐

  1. idea开发工具中你可能不知道的却又比较好用的快捷键

    Alt+insert :生成代码 较为常用的是 1.普通Class中生成get set 方法 .生成构造函数.生成spring注入.重写对象的equal.toString.hashcode方法 2.如 ...

  2. Java [leetcode 37]Sudoku Solver

    题目描述: Write a program to solve a Sudoku puzzle by filling the empty cells. Empty cells are indicated ...

  3. CSS预处理器Sass(Scss)、Less、Stylus

    CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...

  4. 【转】 当程序崩溃的时候怎么办 Part-2

    转自:http://www.tairan.com/archives/1143 欢迎回到当程序崩溃的时候怎么办 教程! 在这个教程的第一部分,我们介绍了SIGABRT和EXC_BAD_ACCESS错误, ...

  5. OpenGL学习之路（五）

    1 引子 不知不觉我们已经进入到读书笔记(五)了,我们先对前四次读书笔记做一个总结.前四次读书笔记主要是学习了如何使用OpenGL来绘制几何图形(包括二维几何体和三维几何体),并学习了平移.旋转.缩放 ...

  6. MySQL查询执行过程

    MySQL查询执行路径 1. 客户端发送一条查询给服务器: 2. 服务器先会检查查询缓存,如果命中了缓存,则立即返回存储在缓存中的结果.否则进入下一阶段: 3. 服务器端进行SQL解析.预处理,再由优 ...

  7. 2016"百度之星" - 初赛(Astar Round2B) 1006 中位数计数

    思路:统计当前数左边比它小|大 i个人,相应右边就应该是比它大|小i个人 l数组表示左边i个人的方案 r表示右边i个人的方案 数组下标不可能是负数所以要加n //#pragma comment(lin ...

  8. leetcode@ [263/264] Ugly Numbers & Ugly Number II

    https://leetcode.com/problems/ugly-number/ Write a program to check whether a given number is an ugl ...

  9. A Tour of Go Switch evaluation order

    Switch cases evaluate cases from top to bottom, stopping when a case succeeds. (For example, switch ...

  10. A Tour of Go Switch

    You probably knew what switch was going to look like. A case body breaks automatically, unless it en ...