可滑动的窗口的内部Div可独立滑动，并将内部Div滑动条隐藏

最新推荐文章于 2024-05-08 10:05:10 发布
最新推荐文章于 2024-05-08 10:05:10 发布
阅读量3.7k 收藏 2
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38353578/article/details/70596496
版权

例如 ：让红色的div可以独立的向下滑动且并不影响浏览器的滑动，而且自身的滑动条隐藏掉



1.红色div的外面再嵌套一个div1 固定高度和宽度

   css必须设置 overflow:hidden


2.红色div的固定高度(不能超过div1的高度)和宽度（注意：宽度必须比div1的宽直到刚好遮住div自身的滑动条）

   css必须设置  overflow-y:scroll;overflow-x：hidden


寒风沙
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
网页窗口和使用vue创建窗口示例
qq_52695936的博客
10-04 1659
网页窗口可以根据其用途和样式分为多种类型。
滑动窗口
pao___pao的博客
06-29 293
滑动窗口是用两个指针来维持一个窗口，并通过相应策略来更新窗口的一种解题思路 1.和为S的连续正数序列:（如果S=100，则18,19,20,21,22为其中一个序列） public ArrayList<ArrayList<Integer> > FindContinuousSequence(int sum) { ArrayList<ArrayList&lt...
css + div 滑动弹出div效果
12-21
css + div 滑动弹出div效果，可自定义弹出效果。
div内部内容超出滚动
VibMike的博客
12-08 1967
1、首先我们需要来看看这个效果，能看见内容是可以滚动的 2、然后新建一个空的html 3、我们写入一个空白的div，并给它一个类 4、接着在标题标签下写一个内联样式，并将默认的一些样式去掉(个人喜好，可以不去，不影响) 5、给div写一个样式，让它居中在页面上，并写个边框给它 6、效果如下 7、接着给div里面插入一个ul标签，ul标签里面再插入一个li，li用来写你的内容 8、给所有li标签设置一个样式和背景颜色 9、效果如下，可以看见它们跑
前端如何设置div视图可滚动
最新发布
chenchuang0128的博客
05-08 374
的高度时显示垂直滚动条，但如果内容没有超出，则不会显示滚动条。如果你希望始终显示滚动条（无论内容是否超出），可以使用。另外，如果你希望同时允许水平和垂直滚动，可以简单地设置。CSS 属性来实现。元素可滚动，你可以通过设置其。
div设置滚动
weixin_52772897的博客
08-09 1490
设置隐藏滑轮：.子元素的类名::-webkit-scrollbar { display: none;/*隐藏滚动条*/ }子元素设置：overflow-y: scroll;首先父元素设置固定宽高，并设置：overflow: hidden;
原生 js、html 滑动窗口
weixin_58425109的博客
01-10 728
像 element-ui 和 ant-ui 这些 UI 库他们提供的 table 组件都是可以设置固定列的，比如左边固定则滚动的时候左边不会随着滚动而看不见，右边固定则右侧一列是固定住不动的。阴影的效果是，当 table 往右边滚，则左固定列显示阴影效果；如果同时设置左右列都固定，则临界边不显示阴影而滚动到中间两侧固定列都显示阴影。因为直接对 table 进行样式更改，不会改变 table 的 dom 结构，会保留 table 原有的“一列行高变化其它列行高也变化”效果。左边列固定滚动的table。
用JS做一个滑动窗口的特效
农夫阿才
08-24 978
1. 效果展示 2. 代码编写 2.1 分析 首先，外面有一个大的div，也就是为蓝色背景的那个div。里面还有一个更大的div，必须超出蓝色背景的父div，否则js中的scrollLeft是不能用的，将一直为0。 比较大的第二层div又包含着两个小的div,这两个div一样，只是id值不同。包含着四张图片。而且最外边的div宽度要正正好好放下这四张图片。否则滑动会有空隙。 第二层的div要浮...
基于JavaScript实现div层跟随滚动条滑动
10-22
项目需求是这样的：在一个页面放2个悬浮框，悬浮框随页面的上下滚动有上下波动的效果，最终固定在同一位置，下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料，对js div跟随滚动条滑动相关...
js实现鼠标滑动到某个div禁止滚动
10-14
主要为大家详细介绍了js实现鼠标滑动到某个div禁止滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
移动端jQuery修正Web页面滑动时div问题的两则实例
10-22
**实例一：解决顶部固定div滑动闪动问题** 在移动端，当页面中有一个固定在顶部的div（例如导航栏）时，用户上滑屏幕时可能会出现闪动的情况。这个问题通常是由于在处理页面滚动时CSS样式更新的延迟导致的。传统的...
JavaScript实现图片DIV竖向滑动的方法
10-24
在这个实例中，我们将讨论如何使用JavaScript来控制图片或者包含图片的DIV元素进行垂直方向上的平滑移动，这通常应用于图片轮播、滑动展示等效果。 首先，我们看到HTML部分设置了一个基本的页面结构，包括一个用于...
DIV+CSS实现的滑动门菜单特效代码
10-30
带椭圆的滑动门效果代码，是竖排的效果代码，看代码是个很典型的实现效果，推荐大家学习
div透明，类似窗口滑动的样式
qq_42164863的博客
03-20 263
实现div透明，Chrome浏览器 opacity: 0.7; /*透明度 */ 实现类似窗口滑动一样的效果，背景图片不随网页滑动 有一个关键属性 background-attachment: fixed; 效果： ...
滑动窗口法详解
热门推荐
楼上小宇_home
04-23 4万+
算法目的 前言 一个经典的问题 代码如下 总结 参考资料 算法目的 该算法展示了如何将嵌套for循环在少数问题中转换为单个for循环，从而减少了时间的复杂性。 前言 一个经典的问题 给一组大小为n的整数数组，计算长度为k的子数组的最大值 我们希望的结果如下 Input : arr[] = {100, 200, 300, 400} k...
h5页面实现固定div内滚动
yheartbeats的博客
03-18 3609
h5页面实现固定div内滚动实现方法： 注意： 因为h5页面没有scroll-view这样的组件，这里使用css实现滚动， 父元素flex布局，高度100%，页面从上到下正常铺，需要实现滚动的div css设置 flex = 1； overflow: scroll; //需要滚动的div样式设置 .scroll{ display:flex； flex = 1； overflow: scroll; } 实现效果： ...
通过css在网页中实现容器内元素横向滚动
酱茄 jiangqie.com
03-18 1895
网页中元素默认是纵向排列的，我们可以通过css属性将容器内子元素实现横向排列，超出隐藏，并可以横向滚动。 基础结构如下: <div class="scroll-box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item
纯CSS实现滑动效果（Slide Up & Slide Down）
廿四桥明月夜的博客
12-12 1万+
只需要一个DIV元素便可实现滑动效果，避免了使用JavaScript为元素的动画（IE浏览器下仅支持IE9以上） HTML代码 这里是内容 点击看看 CSS代码 .slider { overflow-y: hidden; max-height: 500px; /* 最大高度 */ backgroun
css 样式div框可上下滑动 滑动隐藏 随着鼠标下滑展示下面内容
04-26
您可以使用CSS属性overflow来实现div框可以上下滑动，同时使用position和top/right/bottom/left属性来调整div框的位置。关于滑动隐藏或鼠标下滑自动展示下面内容的效果，您可以使用JavaScript来实现。具体方法请参考以下代码： CSS样式： div { height: 200px; /* 设置div的高度 */ overflow: auto; /* 设置div可以上下滑动 */ position: fixed; /* 固定div的位置 */ bottom: 0; /* 将div放置在页面底部 */ right: 0; /* 将div放置在页面右侧 */ } JavaScript代码： var lastScrollTop = 0; window.addEventListener("scroll", function(){ // 监听滚动事件 var st = window.pageYOffset || document.documentElement.scrollTop; if (st > lastScrollTop){ // 如果鼠标往下滑动 document.querySelector("div").style.display = "none"; // 隐藏div } else { document.querySelector("div").style.display = "block"; // 展示div } lastScrollTop = st <= 0 ? 0 : st; }, false);

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值