html 实现网页单屏显示 满屏显示，不出现滚动条。

1、打开html开发工具，新建一个html代码页面，在html代码页面输入大量的文本内容，确保在浏览器上能有滚动条出现。

2、引入一个jquery.js库。在title标签后面创建一个script标签，然后引入jquery.js文件。

3、新建一个script标签，在这个标签里面创建使用$(window).scroll()监听滚动条滚动事件（案例中判断当滚动条滚动高度超过100的时候就出现一个d出框）。

4、保存html代码后使用浏览器打开，然后滚动Y轴滚动条。

5、发现滚动到一定位置后会出现一个alertd出框表示监听滚动条成功。

扩展资料  

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

HTML文本由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。

这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

HTML其实是文本，它需要浏览器的解释，它的编辑器大体可以分为以下几种：

基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，WPS来编写，也可以。不过存盘时请使用htm或html作为扩展名，这样就方便浏览器认出直接解释执行了。

半所见即所得软件，如：FCK-Editer、E-webediter等在线网页编辑器；尤其推荐：Sublime Text代码编辑器（由Jon Skinner开发，Sublime Text2收费但可以无限期试用）。

所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如：AMAYA（出品单位：万维网联盟）。

任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂，不利于大型网站的多人协作和精准定位等高级功能的实现。

fullscreen API 接口

属性1：fullscreenElement 该属性返回当前处于全屏模式的DOM元素。

属性2：fullscreenEnabled 该属性返回当前 document 是否进入了可以请求全屏模式的状态。

方法1：requestFullscreen() 请求进入全屏模式。

方法2：exitFullscreen() 退出全屏模式。

事件1：fullscreenchange 进入/退出全屏模式切换时会触发。

事件2：fullscreenerror 进入/退出全屏模式失败时会触发。

由于fullscreen API 存在浏览器兼容性问题，所以我们在使用的时候需要进行跨浏览器处理，参考代码：

跨浏览器返回正处于全屏的元素

function fullscreenElement(){

var fullscreenEle = document.fullscreenElement ||

document.mozFullScreenElement ||

document.webkitFullscreenElement

//注意：要在用户授权全屏后才能获取全屏的元素，否则 fullscreenEle为null

console.log("全屏元素："+fullscreenEle)

return fullscreenEle

}

跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态

function fullscreenEnable(){

var isFullscreen = document.fullscreenEnabled ||

window.fullScreen ||

document.webkitIsFullScreen ||

document.msFullscreenEnabled

//注意：要在用户授权全屏后才能准确获取当前的状态

if(isFullscreen){

console.log('全屏模式')

}else{

console.log('非全屏模式')

}

}

跨浏览器发动全屏

function lanchFullscreen(element){

if(element.requestFullscreen){

element.requestFullscreen()

}

else if(element.mozRequestFullScreen){

element.mozRequestFullScreen()

}

else if(element.msRequestFullscreen){

element.msRequestFullscreen()

}

else if(element.webkitRequestFullscreen){

element.webkitRequestFullScreen()

}

}

跨浏览器退出全屏

function exitFullscreen(){

if(document.exitFullscreen){

document.exitFullscreen()

}

else if(document.mozCancelFullScreen){

document.mozCancelFullScreen()

}

else if(document.msExitFullscreen){

document.msExiFullscreen()

}

else if(document.webkitCancelFullScreen){

document.webkitCancelFullScreen()

}

}

各浏览器fullscreenchange 事件处理

document.addEventListener('fullscreenchange', function(){ /*code*/ })

document.addEventListener('webkitfullscreenchange', function(){ /*code*/})

document.addEventListener('mozfullscreenchange', function(){ /*code*/})

document.addEventListener('MSFullscreenChange', function(){ /*code*/})

各浏览器fullscreenerror 事件处理

document.addEventListener('fullscreenerror', function(){ /*code*/ })

document.addEventListener('webkitfullscreenerror', function(){ /*code*/})

document.addEventListener('mozfullscreenerror', function(){ /*code*/)

document.addEventListener('MSFullscreenError', function(){ /*code*/ })

跨浏览器全屏模式下样式代码

:-webkit-full-screen { }

:-moz-full-screen { }

:-ms-fullscreen { }

:fullscreen { }

---