开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使页面不可滚动，但div可滚动

要使页面不可滚动，但div可滚动，可以通过CSS和JavaScript来实现。

使用CSS：可以通过设置页面的overflow属性来控制页面的滚动行为。将body或html元素的overflow属性设置为hidden，可以禁止页面的滚动。然后，将需要滚动的div元素的overflow属性设置为auto或scroll，以允许该div元素内部的内容滚动。

示例代码：

body, html {
  overflow: hidden;
}

div.scrollable {
  overflow: auto;
  height: 300px; /* 设置div的高度，超过该高度时会出现滚动条 */
}

使用JavaScript：可以通过JavaScript来动态设置页面的滚动行为。通过监听滚动事件，当滚动到指定的div元素时，禁止页面的滚动，而允许该div元素内部的内容滚动。

示例代码：

<body>
  <div class="scrollable" onscroll="handleScroll(event)">
    <!-- div内部的内容 -->
  </div>

  <!-- 其他页面内容 -->
</body>

<script>
function handleScroll(event) {
  var div = event.target;
  var scrollTop = div.scrollTop;
  
  // 判断是否滚动到顶部或底部，如果是则禁止页面滚动
  if (scrollTop === 0 || scrollTop === (div.scrollHeight - div.clientHeight)) {
    document.body.style.overflow = 'hidden';
  } else {
    document.body.style.overflow = 'auto';
  }
}
</script>

以上是使页面不可滚动，但div可滚动的实现方法。这种方法适用于需要在页面中创建可滚动区域的情况，例如弹出框、侧边栏等。对于需要在整个页面中禁止滚动的情况，可以将overflow属性设置为hidden，并且禁用滚动事件。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

html滚动条使用，以及页面有多个div块，如何让body页面不使用滚动条，只在某个div内使用滚动条

滚动条基本知识：建议比价华丽的页面使用overflow:scroll这个样式的滚动条，比较好看。...举例： 2，页面有多个div块，如何让...body页面不使用滚动条，只在某个div内使用滚动条先说说正常显示的，显示滚动条和不显示滚动条，效果图如下：代码： iframe 中始终显示滚动条：</h3...，会导致页面内容过多事不能显示超出页面高度的内容，所有要注意协调。...2，另外可能会出现关闭了整个body的滚动条后，发现div的滚动即使启动了也没有显示，这种情况可能是没有设置此div的高度或宽度，这是需要设置的。

4.5K3 0

css如何隐藏垂直滚动条但同时需保持滚动

前言在写前端页面时,对于超出的内容,我们希望隐藏,同时保持垂直的滚动,但是又不希望有丑陋的垂直滚动条,那该怎么去实现呢实现方式有很多种,可以用iscroll插件,也可以用css去解决 01 方法1-...计算滚动条宽度并隐藏起来这种方法主要是通过计算滚动条宽度,给隐藏起来的,如下示例所示具体片段代码如下所示 <div...,实现隐藏 bottom: 0; overflow-x: hidden; overflow-y: scroll; // 垂直滚动 } 02 方法2-使用三个容器包围起来，不需要计算滚动条的宽度...这样子就看不到滚动条同时也可以滚动 ...> export default { name:"curWidthScroll2

2.1K1 0

如何使背景照片覆盖全屏不会随屏幕滚动

html 中 css 中使背景照片覆盖全屏 body,html{ background: url(..

1.5K3 0

视频流媒体平台EasyNVR使用iframe集成到页面时如何去除页面的滚动条？

我们之前讲过登录页面显示不全问题，知道其实很多关于显示的问题，其中有编译的原因，而大部分的问题都是由于显示的尺寸不对所导致的。...有用户就提出在使用iframe集成到自己的平台页面时，页面侧边出现滚动条，而用户并不想要此滚动条。 ?...一般来说，当页面出现滚动条时，一定是内容大于父级盒子，我查找了用户的代码发现，用户为了更好的集成到直接的业务当中改动了aspect=640*400 和 width=“640” height=“360”。...比例不一致，导致此处出现滚动条。 ? 改动aspect=640*360的时候 width=“640” height=“360”的比例一定要一致。 ? 比例正常，页面就会正常播放： ?

1.3K2 0

我如何用一行Css代码使谷歌浏览器的数据网格滚动快10倍

您还可以检查哪些外部网站链接到您的页面，当我浏览"顶部链接网站"页面时，我注意到了主要的滚动滞后。当选择显示较大的数据集（500 行）而不是默认的 10 个结果时，就会发生这种情况。...对于此记录，它显示时间主要用于更新图层，如紫色方块中的文本所示，其中表示：Update layer tree: 瀑布图显示， “Update layer tree” 是使滚动变慢的原因。...这解释了它的一部分，但500行仍然不是那么多。肯定还有更多... 第 4 步 - 检查 DOM 不幸的是，DOM 在包含许多元素时不是很出色。...这里要做的显而易见的事情是改变使用具有虚拟渲染的数据网格，但让我们看看我们能否以更少的努力改进已经存在的数据网格。...第 5 步 - 改善情况基于性能配置文件中的数据，我怀疑在滚动网格时，整个页面都已布局。并且指出许多要素的成本很高。要是有办法限制效果就好了 ... ...

2.1K1 0

jQuery遮罩（Mask）及弹窗时禁止页面滚动实现

jQuery遮罩很容易实现，遮罩弹出后最好是要禁止页面滚动。下面就写一个简单的遮罩，和禁止页面滚动的实例。...HTML：显示遮罩层 <... height: 100%; } jQuery： $(".btn").click(function(){ $('html,body').addClass('ovfHiden'); //使网页不可滚动...}) $(".btnc").click(function(){ $('html,body').removeClass('ovfHiden'); //使网页恢复可滚 }) 声明：本文由w3h5原创...，转载请注明出处：《jQuery遮罩（Mask）及弹窗时禁止页面滚动实现》 https://www.w3h5.com/post/379.html (adsbygoogle = window.adsbygoogle

6.2K1 0

从 antDesign 来窥探移动端“滚动穿透”行为

现象直观上来说所谓的 Scroll Chaining（滚动链接）通常会在两种情况下被意外触发：拖动不可滚动元素时，可滚动背景意外滚动。...就比如，手册上规定了在 Element 以及 Document 中滚动必要的特性以及在代码层面应该如何处理这些特性，但是手册中并没有强制规定某些行为不可以被实现，就好比 scroll chaining...如果在上述的范围内，祖先元素中不存在可滚动的元素，表示整个区域实际上是不可滚动的。那么不需要触发任何父元素的意外滚动行为，直接进行 event.preventDefault() 阻止默认。...> ); } export default App; 我们在页面中拖拽滚动 This is child-2 内容时，此时控制台会打印...，此时将 status 变为 00, // 否则表示当前元素可滚动但滚动条在顶部，将status变为 01 status = offsetHeight >= scrollHeight

4172 0

如何使用 CSS 设置和自定义水平和垂直滚动条

滚动条是图形用户界面（UI）中必不可少的组件。滚动条允许用户查看超出其容器宽度或高度的内容。滚动条还使用户能够查看超出屏幕宽度或高度的内容。默认情况下，浏览器会为body内容的溢出包含一个滚动条。...您可以设计您的侧边栏以显示可滚动的导航项目列表。...页面的正文继续滚动，但侧边栏保持在用户的视图中。以下代码片段包含了将侧边栏设置为固定位置的样式，如上述截图所示。...">6 7 页面在屏幕左下角有一个默认的水平滚动条，但您不希望网站的用户使用它。...依赖默认滚动条意味着用户必须水平滚动整个页面才能查看完整的内容。用户还将滚动不需要滚动的内容。您的目标是确保蓝色正方形只能在橙色容器内查看，如下图所示。

1.2K0 0

纯滚动怎么理解_scrollview不滚动

本文介绍元素尺寸中内容最多的一部分——滚动scroll 滚动宽高 scrollHeight 　　scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分 scrollWidth...); //120 120 console.log(test.clientHeight,test.clientWidth); 　　【2】存在滚动条时，但元素设置宽高大于等于元素内容宽高时...元素未滚动时，scrollLeft的值为0，如果元素被水平滚动了，scrollLeft的值大于0，且表示元素左侧不可见内容的像素宽度　　当滚动条滚动到内容底部时，符合以下等式 scrollHeight...如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。...:absolute;left:0;top:500px;background-color:green"> 滚动到页面开头

1.9K2 0

一文带你响应式网页设计入门

用于标识移动网站的Viewport Meta标签 viewport meta标签为浏览器如何调整页面以适应每个设备的宽度做出了依据。...媒体查询使您可以根据当前设备尺寸来设置元素的样式。现在流行的CSS策略是首先编写移动样式，然后在其上构建更复杂的桌面版网页样式。...虽然媒体查询对于响应式网页设计是必不可少的，但许多其他新的CSS功能也在浏览器中得到广泛采用和支持。在响应性网页设计方面，Flexbox是这些新的重要CSS功能之一。什么是Flexbox？...如何创建自适应网格布局？Flexbox。我们如何实现全球和平？Flexbox。...没关系，内容溢出滚动条可以为你解决这个问题。此技术的常见用途包括可滚动菜单和表格。下面是一个可滚动菜单的示例。

4.8K2 0

Scroll，你玩明白了嘛？

2.3 注意 1、在可滚动的容器上设置了 scroll-behavior: smooth 之后，其优先级是高于 JS 方法的。...1、页面有 iframe 的情况下，比如说这个例子。表现是当 iframe 内的内容发生滚动时，主页面也发生了滚动。...这显然和 MDN 上的描述不一致： Element 接口的 scrollIntoView () 方法会滚动元素的父容器，使被调用 scrollIntoView () 的元素对用户可见。...4、如何区分人为滚动和脚本滚动 4.1 背景最近遇到这么一个需求，做一个实时高亮当前播放内容的字幕文稿。...但实际上滚动是一个很快的过程，跟我们兜底的定时器逻辑，也就是前后脚的事情，是不是可以只保留兜底的逻辑？

3.1K2 1

Selenium及python实现滚动操作多种方法

selenium并不是万能的，有时候页面上操作无法实现的，这时候就需要借助JS来完成了。　当页面上的元素超过一屏后，想操作屏幕下方的元素，是不能直接定位到，会报元素不可见的。...这时候需要借助滚动条来拖动屏幕，使被操作的元素显示在当前的屏幕上。滚动条是无法直接用定位工具来定位的。...id，但js中没有xpath的方法，所以滚动条没有id的网页此方法不适用上面展示的是上下方向的滚动条，接下来介绍左右方向的滚动条的操作方法 #左右方向的滚动条可以使用window.scrollTo(...，此方法用途比较广方法三：根据页面显示进行变通，发送tab键比如，密码是输入框，正常手工操作时，可以通过tab键会切换到密码框中，所以根据此思路，在python中也可以发送tab键来切换，使元素显示...代码块 driver.find_element_by_xpath("//div[@id='search']/div/span/input").click() target = driver.find_element_by_id

5.9K2 1

蒙层禁止页面滚动的方案

蒙层禁止页面滚动的方案弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。...但是在蒙层出现的时候滚动页面，如果不加处理，蒙层底部的页面会开始滚动，实际上我们是不希望他进行滚动的，因此需要阻止这种行为。...，所以在设置这个样式的时候滚动条会消失，而移除样式的时候滚动条又会出现，所以在视觉上是会有一定的闪烁现象的，当然也可以定制滚动条的样式，但滚动条样式就是另一个兼容性的问题了，还有同样是因为裁剪。...所以如果在蒙层内部有元素需要滚动的话，需要用Js控制其逻辑，但是逻辑控制起来又是比较复杂的，我们可以判断事件的event.target元素，如果touch的目标是弹窗不可滚动区域即背景蒙层就禁掉默认事件...，反之就不做控制，之后又出现了问题，需要判断滚动到顶部和滚动到底部的时候禁止滚动，否则触碰到上下两端，弹窗可滚动区域的滚动条到了顶部或者底部，依旧穿透到body，使得body跟随弹窗滚动，这样的话逻辑的复杂程度就比较高了

6.1K2 1

滚动，你真的懂了吗

管理系统也有经常使用窗体滚动+DIV内滚动这种场景就是，两者都会出现，故计算滚动时最为复杂、 ?...#div").offset().left; //节点的宽高 $("#div").height(); $("#div").width(); //节点的滚动条偏移值 $("#div").scrollTop(...); 现在我们知道如何调用滚动条到指定的位置和获取滚动条偏移值，那么我们来做一个需求把假设是这个页面 ?...需求描述：希望通过点击按钮，使绿色区域的item，能够定位到屏幕中间这种需求很常见吧~ 那么我们先分析下页面，可以从页面中看出，这个是一个内滚动布局单页页面。...为了使目标节点，移动到内滚动区域的中间线我们最终需要知道当前目标节点距离中间线的偏移值，然后加上当前滚动区域的滚动条偏移值，便是我们需要滚动条滚动到的偏移值大小了。

1.6K7 0

基于JS实现回到页面顶部的五种写法(从实现到增强)

元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度　　由于scrollTop是可写的，可以利用scrollTop来实现回到顶部的功能...window中显示的文档，x和y指定滚动的相对量　　只要把当前页面的滚动长度作为参数，逆向滚动，则可以实现回到顶部的效果 <button...如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。...如果没有提供该参数，默认为true 　　使用该方法的原理与使用锚点的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部按钮，使目标元素重新回到原来位置，则达到预期效果...id="box" class="box"> 2】动画增强　　为回到顶部增加动画效果，滚动条以一定的速度回滚到顶部

5.1K2 1

滚动，你真的懂了吗

管理系统也有经常使用窗体滚动+DIV内滚动这种场景就是，两者都会出现，故计算滚动时最为复杂、 ?...#div").offset().left; //节点的宽高 $("#div").height(); $("#div").width(); //节点的滚动条偏移值 $("#div").scrollTop(...); ---- 现在我们知道如何调用滚动条到指定的位置和获取滚动条偏移值，那么我们来做一个需求把假设是这个页面 ?...需求描述：希望通过点击按钮，使绿色区域的item，能够定位到屏幕中间这种需求很常见吧~ 那么我们先分析下页面，可以从页面中看出，这个是一个内滚动布局单页页面。...为了使目标节点，移动到内滚动区域的中间线我们最终需要知道当前目标节点距离中间线的偏移值，然后加上当前滚动区域的滚动条偏移值，便是我们需要滚动条滚动到的偏移值大小了。

1K1 0

点击按钮，回到页面顶部的5种写法

元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度由于scrollTop是可写的，可以利用scrollTop来实现回到顶部的功能...window中显示的文档，x和y指定滚动的相对量,只要把当前页面的滚动长度作为参数，逆向滚动，则可以实现回到顶部的效果 1 2 【2】动画增强为回到顶部增加动画效果，滚动条以一定的速度回滚到顶部

2.4K3 0

【CSS】面试官问我视差滚动怎么实现？我懵了...

视差滚动====视差滚动是一种效果，能够使不同层次的元素以不同的速度进行滚动，从而产生了视觉上的深度感和动态效果。...如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。...scroll背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。对父元素css_demo设置overflow: scroll，当元素内容超出页面时滚动。...子元素word随着页面滚动显示，对子元素bg设置 background-attachment: fixed，使其在当前视口固定。...通过设置transform-style和 perspective，使该容器的子元素处在3D空间中，然后设置 transform: translateZ使物体在滚动的时候在Y轴移动位移不同，产生视觉差。

1741 0

【CSS】面试官问我视差滚动怎么实现？我懵了...

视差滚动视差滚动是一种效果，能够使不同层次的元素以不同的速度进行滚动，从而产生了视觉上的深度感和动态效果。...如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。...scroll 背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。对父元素css_demo设置overflow: scroll，当元素内容超出页面时滚动。...子元素word随着页面滚动显示，对子元素bg设置background-attachment: fixed，使其在当前视口固定。...通过设置transform-style和 perspective，使该容器的子元素处在3D空间中，然后设置transform: translateZ使物体在滚动的时候在Y轴移动位移不同，产生视觉差。

2032 0

RenderingNG中关键数据结构及其角色

」Tuple 「属性树」是解释「视觉和滚动效果」如何应用于DOM元素的数据结构每个Web文档都有四个「独立的属性树」：「变换」Transform、「剪切」clip、「视觉效果」effect和「滚动」Scroll...不可变的片段树The immutable fragment tree ❝「不可变的片段树」是渲染管道的「布局阶段」的输出它表示页面上所有元素的位置和大小 ❞ ❝「每个片段fragment代表一个DOM...元素的一部分」 ❞ 通常情况下，每个元素只有一个片段，但如果在渲染管道中绘制Paint阶段被分割Split到不同的页面，则会有更多的片段。...在「DOM 顺序」中位于蓝色 div 之前，但「CSS 绘制顺序」要求负 z-index 的蓝色 div 在绿色 div 之前绘制。...例如，当滚动一个网站时，现有瓦片的位置会向上移动，只是需要为更远的页面内容栅格化一个新瓦片。上面的图片有四张「瓦片」。当滚动发生时，「第五块」瓦片开始出现。

1.9K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭