隐藏式滚动条但有滚动效果

最新推荐文章于 2022-09-22 15:41:16 发布
最新推荐文章于 2022-09-22 15:41:16 发布
阅读量86 收藏
点赞数
分类专栏： 前端 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/walk_man_3/article/details/120205027
版权 
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .inner{
                width: 200px;
                height: 200px;
                border: 1px solid #000000;
                overflow-x: hidden;
            }
            
            .inner::-webkit-scrollbar {
                display: none;
            }
        </style>
    </head>
 
    <body>
        <div class="inner">
            <p>王小</p>
            <p>王小</p>
            <p>王小</p>
            <p>王小</p>
            <p>王小</p>
            <p>王小</p>
            <p>王小</p>
        </div>
    </body>
 
</html>

沈行的专栏
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现CSS隐藏滚动条并可以滚动内容
dengla6847的博客
09-18 3073
隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。 方法1：计算滚动条宽度并隐藏起来 在本站的侧栏，你可以看到前端日报的那块内容并没有滚动条，但鼠标移上去却可以滚动内容。这是什么技术呢？ 其实我只是把滚动条通过定位把它隐藏了起来。· 下面给一...
如何隐藏滚动条还能实现滚动的功能
ad775202的博客
04-01 566
有时候，我们需要用到滚动条的功能，但是又不需要展示出滚动条给用户看这种奇葩的需求，那么我们要怎么来实现呢？下面我提供了两种方案，适用于pc端、也适用与移动端。 第一种方案，通过样式来隐藏原生的滚动条，下面提供了两种方式，但是这样会导致偶现原生样式的情况 <!doctype html> <html lang="en"> <head> ...
多种隐藏滚动条但是依然可以滚动实现方式
m0_49515138的博客
09-15 8741
方法四：css样式直接隐藏滚动条。注意，不过这个方法不兼容部分IE，做移动端的可以使用。通过固定宽度样式将滚动条给隐藏起来。chrom 和ie 正常使用。方法三：使用三个容器包裹，不需要写死滚动条宽度。方法一： iscroll插件。
HTML隐藏滚动条，还带着滚动效果
小天空的博客
09-22 8141
取巧的方法，原理是通过给滚动条所在块元素外嵌套一个块元素，调整边距，覆盖隐藏。例如第一步：给div外部创建一个同样大小的div。第二步：给父元素div设置超出部分遮挡，overflow: hidden;子元素div调整边距使其隐藏在父元素div之下即可。注意：如果是给整个页面设置，可以父元素（html）子元素（body）
css怎么隐藏滚动条
热门推荐
u010227042的博客
06-16 7万+
法一： ①使用伪类隐藏滚动条（仅限Chrome与Safari） ②scrollbar-width: none;（仅限firefox） ③-ms-overflow-style: none;（仅限IE 10+）/* 隐藏滚动条 */ .element { width: 100%; height: 72px; box-sizing: border-box; padding-top: 16px; overflow-x: scroll; /* 设置溢出滚动 */ white-spa
关于隐藏内置滚动条实现滚动
Deku_Ln的博客
08-15 369
隐藏浏览器默认滚动条 很多时候我们的数据太多会需要用的滚动。 在css样式中我们可以通过 element { overflow: scroll } 通过设置overflow就可以设置滚动，若需要单独的X轴或者Y轴滚动就可以设置 element { overflow-y: scroll //overflow-x: scroll } 但是当我们在引用一些UI样式的时候可能会默认添加它自带的滚动条，如果是这样的话，我们设置的可滚动也会生成默认的滚动条，这样会有不好的体验。 不过我们可以在样式中设置
隐藏滚动条并且不影响滚动的方法
qq_40974141的博客
11-16 581
//设置横向滚动 .cate2{ white-space:nowrap; margin-left: 10px; height: 1.8em; line-height: 1.8em; padding: 5px 0 8px 0; position:relative; display:box; overflow-x:scroll; } //...
怎麽把＂滚动条＂隐藏？
weixin_34143774的博客
01-19 1055
问题釐清 什麽是＂滚动条＂？ 滚动条指的是下图右侧被红线框起来的部分： 只要网页内容大于视窗，滚动条就会出现。 一般来说，只要不是body层次的滚动条，那用overflow: hidden;就能解决滚动条出现的问题，但此时页面也会变得无法捲动。 目前网路上已经有诸多可隐藏非body层次的滚动条又可捲动页面的教学，所以本文主要聚焦于如何隐藏浏览器（也就是body层次）的滚动条。 解决方法 针对不同...
前端切图:CSS实现隐藏滚动条同时又可以滚动
祈澈菇凉
03-14 3585
CSS 实现隐藏滚动条同时又可以滚动原始功能： 图片发自简书App添加伪类之后的功能：图片发自简书App完整demo如下：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/ti..
css隐藏滚动条，兼容ie和chrome
qq_36722175的博客
07-20 4223
隐藏滚动条
CSS隐藏滚动条的方法
csdn_cai_csdn的博客
12-19 4万+
方法一： 纯CSS+div样式隐藏。 在需要滚动的元素外面再套一个div，给最外面的div设置样式overflow:hidden，宽度比需要滚动的元素小； 之后给需要滚动的元素设置样式overflow-x:hidden; overflow-y:scroll； <style type="text/css"> *{margin:0;padding:0;} .box{ width: ...
HTML中CSS实现隐藏滚动条
瑰的博客
09-12 9747
隐藏滚动条 &lt;style type="text/css"&gt; .类名::-webkit-scrollbar { display:none } &lt;/style&gt;  
CSS 如何做到隐藏滚动条的同时可以滚动
SCU_Cindy
09-19 5万+
一个页面，当div的高度固定时，里面内容如果过多，将会产生溢出，从而影响整体的美观。这时候，我们一般会设置以下CSS样式，为页面添加滚动条。 overflow: auto / scroll; /** 单独为横向和竖向设置滚动条 **/ overflow-x: auto / scroll; overflow-y: auto / scroll; 有一种场景是页面内部包裹了很多个组件，页面本身具有滚动...
乘法表.php
Vivian_shuang的博客
08-15 470
html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> me
隐藏滚动条（滚动功能可用）
m0_46495397的博客
05-27 4433
外层设置overflow:hidden，需要滚动的容器设置个padding-bottom，当滚动条出现时，就会被外边容易hidden
CSS实现隐藏滚动条并保留滚动功能
heyNewbie的博客
02-15 7272
隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。 方法1：计算滚动条宽度并隐藏起来 在本站的侧栏，你可以看到前端日报的那块内容并没有滚动条，但鼠标移上去却可以滚动内容。这是什么技术呢？ 其实我只是把滚动条通过定位把它隐藏了起来。演示下面给一个简化版的代码 <div class="outer-container"> <div cla..
css添加了原始滚动条要隐藏滚动条的显示
程序员哆啦A梦，蓝胖子
05-13 6262
// 添加伪类 <style> ::-webkit-scrollbar {display:none} </style> <div style=" width:200px; height: 200px; overflow-y: scroll;"> </div>
用 js 实现推拉式滚动效果
最新发布
05-22
实现推拉式滚动效果可以通过以下步骤： 1. 在 HTML 中创建一个包含内容的容器，设置其高度和宽度，并将 `overflow` 属性设置为 `hidden`，以隐藏超出容器大小的内容。 ```html <div class="container"> <p>第一页的内容</p> <p>第二页的内容</p> <p>第三页的内容</p> </div> ``` 2. 使用 JavaScript 获取容器和内容的高度，并计算每个页面的高度。 ```javascript const container = document.querySelector('.container'); const content = container.querySelector('p'); const contentHeight = content.offsetHeight; const containerHeight = container.offsetHeight; const pageCount = Math.ceil(contentHeight / containerHeight); const pageHeight = contentHeight / pageCount; ``` 3. 创建一个变量 `currentPage` 来跟踪当前页面的索引，初始值为 0。在容器中创建一个滑动条，用于控制页面的滚动。 ```javascript let currentPage = 0; const slider = document.createElement('div'); slider.className = 'slider'; container.appendChild(slider); ``` 4. 为滑动条添加事件监听器，在滑动条被拖动时更新页面的位置。 ```javascript slider.addEventListener('mousedown', startDragging); function startDragging(e) { const startY = e.clientY; const startScrollTop = container.scrollTop; document.addEventListener('mousemove', drag); document.addEventListener('mouseup', stopDragging); function drag(e) { const deltaY = e.clientY - startY; container.scrollTop = startScrollTop + deltaY; } function stopDragging() { document.removeEventListener('mousemove', drag); document.removeEventListener('mouseup', stopDragging); } } ``` 5. 在滑动容器时，根据当前滚动位置计算出当前页数，并将滑动条的位置设置为当前页数的百分比。 ```javascript container.addEventListener('scroll', () => { const scrollTop = container.scrollTop; const currentPage = Math.floor(scrollTop / pageHeight); const sliderPosition = (currentPage + 0.5) / pageCount * 100; slider.style.top = `${sliderPosition}%`; }); ``` 6. 当滑动条被拖动时，根据滑动条的位置计算出当前页数，并将容器滚动到当前页的位置。 ```javascript function drag(e) { const sliderY = e.clientY - container.getBoundingClientRect().top; const sliderPosition = Math.max(0, Math.min(sliderY / containerHeight, 1)); const currentPage = Math.floor(sliderPosition * pageCount); const scrollTop = currentPage * pageHeight; container.scrollTop = scrollTop; } ``` 完整代码如下： ```html <style> .container { height: 200px; width: 300px; overflow: hidden; position: relative; } .slider { position: absolute; top: 50%; left: calc(100% - 10px); transform: translate(-50%, -50%); width: 10px; height: 50px; background-color: gray; border-radius: 5px; cursor: pointer; transition: top 0.2s ease-in-out; } </style> <div class="container"> <p>第一页的内容</p> <p>第二页的内容</p> <p>第三页的内容</p> <div class="slider"></div> </div> <script> const container = document.querySelector('.container'); const content = container.querySelector('p'); const contentHeight = content.offsetHeight; const containerHeight = container.offsetHeight; const pageCount = Math.ceil(contentHeight / containerHeight); const pageHeight = contentHeight / pageCount; let currentPage = 0; const slider = document.createElement('div'); slider.className = 'slider'; container.appendChild(slider); slider.addEventListener('mousedown', startDragging); function startDragging(e) { const startY = e.clientY; const startScrollTop = container.scrollTop; document.addEventListener('mousemove', drag); document.addEventListener('mouseup', stopDragging); function drag(e) { const deltaY = e.clientY - startY; container.scrollTop = startScrollTop + deltaY; } function stopDragging() { document.removeEventListener('mousemove', drag); document.removeEventListener('mouseup', stopDragging); } } container.addEventListener('scroll', () => { const scrollTop = container.scrollTop; const currentPage = Math.floor(scrollTop / pageHeight); const sliderPosition = (currentPage + 0.5) / pageCount * 100; slider.style.top = `${sliderPosition}%`; }); function drag(e) { const sliderY = e.clientY - container.getBoundingClientRect().top; const sliderPosition = Math.max(0, Math.min(sliderY / containerHeight, 1)); const currentPage = Math.floor(sliderPosition * pageCount); const scrollTop = currentPage * pageHeight; container.scrollTop = scrollTop; } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值