`
apple_wxs
  • 浏览: 104438 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

保证页面整体只有一对滚动条

HTML 
阅读更多
当页面中有frame的时候，而且frame的高度、宽带动态变化时，页面有时会出现多个滚动条，视觉效果很差，用下面两个js语句就能很好的解决这个问题了。 
document.body.scrollHeight;
document.body.scrollWidth;

举个例子 index.html里有个iframe，里面是xx.html 
<HTML>
 <head>
 <SCRIPT LANGUAGE="JavaScript">
	function query()
	{
		document.all.div1.style.display = "block";
		document.all.bottom.src = "xx.html";
	}
 </SCRIPT>
 </head>
 <BODY>
  保证页面只有一个滚动条<br>
  <button onclick="query()">显示iframe内容，并控制滚动条</button>
  <div id="div1" name="div1" style="display:none">
	<iframe id="bottom" name="bottom" FRAMEBORDER="0" SCROLLING="no" 
	marginwidth="0" marginheight="0"/>	
  </div>
 </BODY>
</HTML>

<HTML>
 <head>
 <SCRIPT LANGUAGE="JavaScript">
 function init()
 {
	parent.document.all.bottom.style.height = document.body.scrollHeight;
	parent.document.all.bottom.style.width = document.body.scrollWidth;
 }
 </SCRIPT>
 </head>
 <BODY onload="init()">
 页面很宽很长~
  <TABLE width="1500" height="1500"border="1">
  <TR>
	<TD>11</TD>
	<TD>12</TD>
  </TR>
  <TR>
	<TD>21</TD>
	<TD>22</TD>
  </TR>
  </TABLE>
 </BODY>
</HTML>
分享到：
| jsp 导出excel
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    然而，滚动条本身会占用一定的空间，这可能会导致页面宽度缩小，从而影响布局的整体美观性。为了不让滚动条影响页面宽度，可以通过以下几种方法进行调整。 首先，可以通过调整body元素的宽度来实现，将body的宽度...

    页面布局有滚动条

    在网页设计中，页面布局与滚动条是两个关键的元素，它们共同决定了用户在浏览网站时的体验。页面布局有滚动条，意味着网页的内容超过了单屏显示的范围，需要通过滚动来查看全部信息。这样的设计既有可能是由于内容...

    Qt悬浮滚动条-滚动条样式

    例如，你可以设置滚动条的滑块颜色、轨道颜色、箭头图标等，使其更符合整体界面的设计风格。此外，还可以调整滚动条的尺寸、圆角、边距等属性，以达到理想的视觉效果。 以下是一段简单的QSS代码示例，用于修改滚动...

    webbrowser滚动条隐藏

    在网页设计和开发中，有时候为了提升页面的美观度或者特定设计需求，我们需要对Web浏览器的滚动条进行隐藏。这个主题“webbrowser滚动条隐藏”主要涉及到CSS样式控制和技术实现，我们将深入探讨如何通过CSS来隐藏...

    css美化滚动条

    在网页设计中，滚动条是不可或缺的一部分，尤其是在内容丰富的页面上。系统默认的滚动条样式通常比较单调，可能与整体设计风格不协调。因此，利用CSS（层叠样式表）来美化滚动条，使之与网站的视觉效果统一，是提升...

    图形滚动条 个性滚动条

    而“图形滚动条 个性滚动条”则提供了一种创新的方法，通过使用div+css技术来定制滚动条，使其不仅具备基本功能，还能成为网页设计的一部分，增加页面的视觉吸引力。 在传统的网页设计中，滚动条通常是操作系统提供...

    华丽滚动条滚动条Jquery

    4. **自定义滚动条样式**：浏览器默认的滚动条样式往往较为单一，但通过CSS和Jquery，我们可以定制滚动条的颜色、大小、形状，甚至鼠标滚动的速度和流畅度，使其更符合网页的整体风格。 5. **Jquery插件**：对于更...

    flex滚动条三种实现方式

    默认滚动条适用于快速开发，而自定义滚动条则能更好地融入到页面设计中，提供更一致的用户体验。需要注意的是，自定义滚动条的兼容性和性能优化需要开发者额外关注。在实际项目中，应根据项目需求和目标用户群体的...

    JS自定义滚动条，可以自定义很多类型的网页滚动条

    通过不断调整和优化，我们可以打造出与网页整体风格相协调，甚至成为网页亮点的滚动条。 总的来说，JS自定义滚动条是一种提升网页用户体验的有效手段，它让我们能够跳出传统滚动条的限制，创造更具个性化的网页交互...

    Html+CSS实现滚动条不挤占内容区宽度.zip

    2. `-webkit-scrollbar`: 这个伪元素用于定义滚动条的整体样式。 3. `-webkit-scrollbar-track`: 定义滚动条轨道的样式。 4. `-webkit-scrollbar-thumb`: 定义滚动条滑块的样式，也就是用户可以点击和拖动的部分。 5...

    vue自定义浏览器滚动条(兼容大部分浏览器含ie)_vue tree组件 下拉滚动条

    在前端开发中，有时我们需要对浏览器的默认滚动条进行自定义，以提升用户体验或符合页面设计风格。Vue.js，作为一款流行的JavaScript框架，提供了多种方式来实现这一需求。本篇文章将详细探讨如何在Vue项目中自定义...

    winform自定义滚动条

    - **自定义逻辑**：可能需要添加新的属性和方法，以支持特定的功能，比如限制滚动范围、增加可停靠的“页面”等。 在实际项目中，自定义滚动条可以用于实现更复杂的数据浏览场景，比如图片浏览器、长表格或文档阅读...

    Css样式制作的小实例 页面整体风格 滚动条样式 安徽机电职业技术学院陈伟

    本篇文章将详细探讨“Css样式制作的小实例”，包括“页面整体风格”的构建和“滚动条样式”的定制，这些都是提升用户体验的关键要素。 首先，我们来谈谈页面整体风格的制作。页面整体风格是指网站的一致性外观，...

    四种漂亮的滚动条样式

    CSS（层叠样式表）提供了一种方法，允许开发者自定义滚动条的样式，使其更加符合整体设计风格。本文将探讨如何使用CSS来设置漂亮的滚动条样式。 首先，我们需要了解CSS中用于控制滚动条样式的属性。主要有以下几类...

    JS去除iframe滚动条的方法

    然而，有时嵌入的网页内容尺寸可能会超过iframe的可视区域，这时浏览器会自动为iframe添加滚动条，以便用户能够滚动查看整个内容区域。虽然这对于某些情况可能是必要的，但在其他一些情况下，开发者可能希望去除滚动...

    winform 滚动条示例

    在Windows Forms（Winform）开发中，滚动条是常见的用户界面元素，用于浏览或导航大量内容。本示例将深入探讨如何在C# Winform应用中实现和使用滚动条，以便用户可以更轻松地控制视图。滚动条分为水平滚动条...

    表格加滚动条

    CSS则用来控制滚动条的样式，包括颜色、宽度、箭头图标等，使其与网页整体设计风格保持一致。 在实际应用中，"表格加滚动条"js插件通常会提供以下功能： 1. **自适应布局**：插件能够根据表格内容自动调整滚动条，...

    好看的滚动条样式

    滚动条作为用户浏览长内容时不可或缺的交互元素，其样式和用户体验往往被开发者忽视，但通过自定义，可以提升网站的整体视觉效果和交互体验。 在Web开发中，CSS（层叠样式表）是用于控制网页外观和布局的主要工具，...

    滚动条刷新定位

    因此，“滚动条刷新定位”技术应运而生，它可以在页面刷新后将滚动条恢复到刷新前的位置，从而提升用户体验。 #### 二、技术原理 实现滚动条刷新定位主要涉及到以下几个方面： 1. **记录滚动位置**：在页面即将...

Magicbox
Global site tag (gtag.js) - Google Analytics