滚动条

转载：https://www.cnblogs.com/evilloop/archive/2013/01/30/2883838.html wxpython的默认窗体类wx.Frame并不带滚动条 如果需要滚动条，需要在初始化的时候进行设定 下边是一个示例： #coding=utf8 import wx class MsgWindow(wx.Frame): def __init__(self, parent, id, title): wx.Frame.__init__(self, parent, id, title, pos=(640,0)) #重要的就下边两句 self.scroller = wx.ScrolledWindow(self, -1) self.scroller.SetScrollbars(1, 1, 1440, 900) self.pnl = pnl = wx.Panel(self.scroller) self.ms = ms = wx.BoxSizer(wx.VERTICAL) self.SetMinSize((300,640)) self.pnl.SetSizer(self.ms) self.ms.Fit(self) if __name__ == '__main__': app = wx.App(redirect=False) msg_win = MsgWindow

JS控制滚动条的位置： window.scrollTo(x,y); 竖向滚动条置顶 window.scrollTo(0,0); 竖向滚动条置底 window.scrollTo(0,document.body.scrollHeight) #coding=utf-8 from selenium import webdriver import time #访问百度 driver=webdriver.Firefox() driver.get( "http://www.baidu.com") #搜索 driver.find_element_by_id( "kw").send_keys( "selenium") driver.find_element_by_id( "su").click() time.sleep( 3) #将页面滚动条拖到底部 # 方法一： js= "var q=document.documentElement.scrollTop=10000" driver.execute_script(js) # 方法二： js _bottom = 'window.scrollTo(0, document.body.scrollHeight)' dr.execute_script(js_bottom) time.sleep( 3) #将滚动条移动到页面的顶部 js= "var q

获取浏览器显示区域（可视区域）的高度 ： $(window).height(); 获取浏览器显示区域（可视区域）的宽度 ： $(window).width(); 获取页面的文档高度 $(document).height(); 获取页面的文档宽度 ： $(document).width(); 浏览器当前窗口文档body的高度： $(document.body).height(); 浏览器当前窗口文档body的宽度： $(document.body).width(); 获取滚动条到顶部的垂直高度 (即网页被卷上去的高度) $(document).scrollTop(); 获取滚动条到左边的垂直宽度 ： $(document).scrollLeft(); 获取或设置元素的宽度： $(obj).width(); 获取或设置元素的高度： $(obj).height(); 某个元素的上边界到body最顶部的距离：obj.offset().top;（在元素的包含元素不含滚动条的情况下） 某个元素的左边界到body最左边的距离：obj.offset().left;（在元素的包含元素不含滚动条的情况下） 返回当前元素的上边界到它的包含元素的上边界的偏移量：obj.offset().top（在元素的包含元素含滚动条的情况下） 返回当前元素的左边界到它的包含元素的左边界的偏移量：obj.offset()

创建一个标准控件(CScrollBar)and 并且自己处理一些消息。 CScrollBar 不支持owner_draw 和 custom_draw , 所以我们只能从WM_PAINT消息进行完全重绘。 明显我们需要 处理WM_LBUTTONDOWN , WM_LBUTTONUP , WM_MOUSEMOVE 来更新滚动条位置。 为了模仿标准scrollbar控件，我们 支持所有WM_VSCROLL请求 。 用其他消息模仿，而非WM_VSCROLL消息。 你可能注意到 标准滚动条 对于多次重复的 点击事件 只处理一次。 别忘记 捕获 鼠标在 滚动条外的 鼠标消息。 再多说一个重点，对于SBM_SETSCROLLINFO的处理。 我已经发现，当控件接收这个消息时，它看起来和标准控件一样，直到repaint重画消息被调用。 所以，我必须强制去处理这个notification.如下： LRESULT CMyScrollbar::OnSetScrollInfo( UINT uMsg, WPARAM wParam, LPARAM lParam, BOOL& /*bHandled*/ ){ const BOOL fRedraw = ( BOOL ) wParam; LRESULT res = DefWindowProc( uMsg, ( WPARAM ) FALSE, lParam ); if

浏览器渲染过程 参考文章 render Tree = Dom Tree + 样式结构体 Dom Tree 浏览器将html代码解析成1个Dom Tree，根节点就是documnet对象 Dom Tree包含所有元素，如：display：none；js动态添加的元素 样式结构体 浏览器将所有样式(css代码)解析成样式结构体 浏览器会去掉自身不能识别的样式：IE会去掉-moz开头的样式，而FF会去掉_开头的样式 render Tree 可以识别样式，每个节点都有自己的style 不包含隐藏的元素(比如display:none的节点，还有head节点)，但包含visibility:hidden隐藏的元素（因为会占据空间） 浏览器根据render Tree进行渲染展示 BFC 参考文章 关于CSS-BFC深入理解 什么是BFC 块级格式化上下文，是一个独立的渲染区域 可以理解为是一个css属性，拥有该属性的元素对内部元素和外部元素会表现出一些特性， 触发条件 根元素，即html元素 float: 不为none position: 不为relative overflow: hidden / auto display: inline-block, table-cell BFC的作用 清除内部浮动 上下margin重叠问题 自适应两栏布局 阻止元素被浮动元素覆盖 BFC布局规则

javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX原文：https://www.cnblogs.com/ifworld/p/7605954.html offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距） clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距） clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和外边距） style.width //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距） style.height //返回元素的高度（包括元素高度，不包括内边距、边框和外边距） scrollWidth //返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同 scrollHeigh //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同 1. style.width 返回的是字符串，如28px，offsetWidth返回的是数值28； 2. style

方法一 body { margin-right: -15px; margin-bottom: -15px; } 原理：这会在margin的水平和垂直方向上添加一个负值, IE添加了该精确数值后, 便会去除对滚动条的需求假象； 优点：在视觉上解决了这个问题，垂直滚动根据内容自适应； 缺点：由于"人为创建"了15px的外边距(margin), 所以无法使用该填充过的屏幕区域。 注意： DIV默认是没有滚动条的，如果加了滚动条样式，去掉后滚动条自然就会消失。如果是框架iframe出现的滚动条，如果要想X横向隐藏滚动条，只需要设置overflow-x:visible或overflow-x:hidden；如果想iframe出现Y纵向滚动条隐藏可以设置CSS样式overflow-y:visible或overflow-y:hidden即可隐藏滚动条。 方法2 那就是自定义滚动条的伪对象选择器::-webkit-scrollbar chrome 和Safari .element::-webkit-scrollbar { width: 0 !important } IE 10+ .element { -ms-overflow-style: none; } Firefox .element { overflow: -moz-scrollbars-none; } http://caibaojian

（从已经死了一次又一次终于挂掉的百度空间人工抢救出来的，发表日期2014-04-18） //标签的属性称作元素属性，在JS里对应的DOM对象的对应属性叫DOM属性。JS里的DOM属性名有时和原元素属性名不同。 //==================================操作元素属性================================== //返回元素指定属性值 var txt1_val=$("#txt1").attr("value"); //通过元素的DOM属性名更改DOM属性值 $("#txt1").attr({ value : "txt1_value" , className : "txt1_class" }); //通过指定元素属性改变元素属性值 $("#txt1").attr("class","txt1_class2"); //给指定元素属性赋值，通过后面捆绑的方法返回值 $("#txt1").attr("class",function(){ return "txt1_class3"; }) //移除指定的元素属性 $("#txt1").removeAttr("class"); //==================================修改CSS类================================== /

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>Title</title> <meta lang="utf8"> <div1> <style> .div1{ background-color: #1ecc86; height:100px; overflow: auto; /*overflow: scroll;scroll有下拉滚动条*/ } </style> </div1></head><body><!--此时由于设置的高度有限，其余部分溢出，加入了overflow:auto,或者overflow:scroll(scroll有下拉滚动条)则会将溢出部分隐藏起来作为一个滚动条可以下拉查看--><div class="div1"> <h1>star</h1> <h1>star</h1> <h1>star</h1> <h1>star</h1> <h1>star</h1> <h1>star</h1> <h1>star</h1> <h1>star</h1> <h1>star</h1> <h1>star</h1> <h1>star</h1> <h1>star</h1> <h1>star</h1>

screenX clientX pageX概念 打开的pop窗口随着鼠标点击的dom元素而定位展示的js代码： e是click事件，o是pop窗口的宽度或高度， eventX = function (e, o) { e = e || window.event; o = o || 0; x = e.pageX || e.clientX + document.body.scroolLeft; return x + o > screen.availWidth ? screen.availWidth - o : x - o / 2 < 0 ? 0 : x - o / 2; } eventY = function (e, o) { e = e || window.event; o = o || 0; alert('clientY = ' + e.clientY); y = e.pageY || e.clientY + document.body.scrollTop; return y + o > screen.availHeight ? screen.availHeight - o : y - o / 2 < 0 ? 0 : y - o / 2; } screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。 clientX