不使用overflow:scroll而实现scroll效果

最新推荐文章于 2023-05-05 23:22:22 发布
最新推荐文章于 2023-05-05 23:22:22 发布
阅读量794 收藏 3
点赞数
分类专栏： web前端 文章标签： javascript html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wenliuyong/article/details/107364376
版权

项目中很多使用overflow:scroll的地方,在移动端webview的加持下,出现一些兼容性的问题,于是索性自己搞一个出来,上代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>scroll</title>
    <style>
        .content-box {
            width: 450px;
            height: 700px;
            background-color: pink;
            margin: 0 auto;
            text-align: center;
            overflow: hidden;
        }
        
        .c-title {
            text-align: center;
        }
        
        .item {
            display: inline-block;
            margin-top: 20px;
            text-align: left;
        }
        
        .content .c-item {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="content-box">
        <div class="content">
            <div class="item">
                <h3 class="c-title">虞美人·春花秋月何时了</h3>
                <div class="c-item">春花秋月何时了，往事知多少？</div>
                <div class="c-item">小楼昨夜又东风，故国不堪回首月明中！</div>
                <div class="c-item">雕栏玉砌应犹在，只是朱颜改。</div>
                <div class="c-item">问君能有几多愁？恰似一江春水向东流。</div>
            </div>

            <div class="item">
                <h3 class="c-title">相见欢</h3>
                <div class="c-item">无言独上西楼，月如钩。</div>
                <div class="c-item">寂寞梧桐深院锁清秋。</div>
                <div class="c-item">剪不断，理还乱，是离愁。</div>
                <div class="c-item">别是一般滋味在心头。</div>
            </div>

            <div class="item">
                <h3 class="c-title">浪淘沙令·帘外雨潺潺</h3>
                <div class="c-item">帘外雨潺潺，春意阑珊。罗衾不耐五更寒。</div>
                <div class="c-item">梦里不知身是客，一晌贪欢。</div>
                <div class="c-item">独自莫凭栏，无限江山，别时容易见时难。</div>
                <div class="c-item">流水落花春去也，天上人间。</div>
            </div>

            <div class="item">
                <h3 class="c-title">虞美人·春花秋月何时了</h3>
                <div class="c-item">春花秋月何时了，往事知多少？</div>
                <div class="c-item">小楼昨夜又东风，故国不堪回首月明中！</div>
                <div class="c-item">雕栏玉砌应犹在，只是朱颜改。</div>
                <div class="c-item">问君能有几多愁？恰似一江春水向东流。</div>
            </div>

            <div class="item">
                <h3 class="c-title">相见欢</h3>
                <div class="c-item">无言独上西楼，月如钩。</div>
                <div class="c-item">寂寞梧桐深院锁清秋。</div>
                <div class="c-item">剪不断，理还乱，是离愁。</div>
                <div class="c-item">别是一般滋味在心头。</div>
            </div>

            <div class="item">
                <h3 class="c-title">浪淘沙令·帘外雨潺潺</h3>
                <div class="c-item">帘外雨潺潺，春意阑珊。罗衾不耐五更寒。</div>
                <div class="c-item">梦里不知身是客，一晌贪欢。</div>
                <div class="c-item">独自莫凭栏，无限江山，别时容易见时难。</div>
                <div class="c-item">流水落花春去也，天上人间。</div>
            </div>
        </div>
    </div>
</body>

<script>
    //获取scroll的盒子
    let boxEle = document.querySelector('.content-box');
    //绑定touchstart事件
    boxEle.addEventListener('touchstart', p => {
        //设置当前触摸的屏幕Y坐标为自定义属性
        boxEle.setAttribute('dragStartY', p.touches[0].screenY);
        //计算可滚动出去的内容高度,即内容高度-可视区域高度
        let offset = boxEle.scrollHeight - boxEle.clientHeight;
        //设置为自定义属性
        boxEle.setAttribute('dragOffset', offset);
    });
    //绑定touchmove事件
    boxEle.addEventListener('touchmove', p => {
        //获取上一帧的触摸Y坐标
        let startY = boxEle.getAttribute('dragStartY');
        //设置当前触摸的屏幕Y坐标为自定义属性
        boxEle.setAttribute('dragStartY', p.touches[0].screenY);
        //注意这里y值触屏位置越往下越大
        let offset = p.touches[0].screenY - startY;
        //如果为正,则说明用户在下拉,如果为负,则说明用户在上滑,直接用原来的scrollTop减去offset即可
        let tgt = boxEle.scrollTop - offset;
        //限定一下可滚动位置
        if (tgt < 0) tgt = 0;
        let dragOffset = boxEle.getAttribute('dragOffset');
        if (tgt > dragOffset) tgt = dragOffset;

        boxEle.scrollTop = tgt;
    });
</script>

</html>

效果如下:

 

WLY_Unity_Unreal
关注
专栏目录
CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
09-25
如果你只想让元素在垂直方向（即上下）有滚动条，而禁止水平方向（左右）的滚动，你可以结合使用`overflow-y`和`overflow-x`两个属性来实现这一效果。`overflow-y: scroll`确保元素在内容高度超出时显示垂直滚动条，...
html基础
weixin_46137478的博客
04-12 264
1、固定定位不占位置，下面的标准流盒子会上去，解决方法，可以直接给margin-top值，让标准流盒子下来 2、a：nth-child（1）表示第一个a 3、c3盒子模型：box-sizing：border-box 4、定位的盒子margin居中，是没有用的，要手动设置，先走浏览器的一半，在走自身的一半， transform:translateX(-50%) 5、浮动、定位之后，行内元素...
隐藏浏览器滚动条但内容可以滚动的3种解决方式（简单清晰）
zhouzuoluo的博客
12-05 1万+
第一种：使用纯css样式属性隐藏滚动条  ：火狐浏览器的css写法不兼容 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-widt
html怎么让页面没有滑动条,使用CSS实现无滚动条滚动的两种方法
weixin_30913041的博客
06-03 4350
我们都知道，撸页面的时候当我们的内容超出了我们的div，往往会出现滚动条，影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。我们都知道overflow:hidden是可以隐藏滚动条的，但存在的问题是：页面或元素失去了滚动的特性，进而溢出内容也变得不可见，这样肯定是不可取的。百度下大部分都是在说ov...
CSS新特性contain，控制页面的重绘与重排
LeZiJie的博客
05-07 263
在介绍新的 CSS 属性 contain 之前，读者首先需要了解什么是页面的重绘与重排。 之前已经描述过很多次了，还不太了解的可以先看看这个提高 CSS 动画性能的正确姿势。 OK，下面进入本文正题， contain 为何？ contain 属性允许我们指定特定的 DOM 元素和它的子元素，让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排，而不必每次都针对整个页面。 The contain property allows an author to in
CSS的overflow属性及清除浮动
拾忆楓灵的博客
04-13 3488
Overflow 值:          visible | hidden | scroll | auto | inherit 初始值：visible 应用于：块级元素和替换元素 继承性：无 计算值：根据指定确定 visible 元素的内容在元素框之外也可见，内容超出元素框时不会改变元素框的形状。 scroll 元素的内容会在元素框的边界处裁剪，溢出的内容将看不见，但是浏览器
css 设置overflow:scroll 滚动条的样式
01-19
css 设置overflow:scroll 滚动条的样式 /* 定义滚动条样式 */ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: rgba(240, 240, 240, 1); } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-...
解决页面使用overflow: scroll在iOS上滑动卡顿的问题1
08-03
标题中的“解决页面使用overflow: scroll在iOS上滑动卡顿的问题1”指的是在iOS设备上，当HTML元素使用CSS属性`overflow: scroll`时，滚动可能会变得卡顿不顺畅。这个问题通常不会在Android设备上出现，使得开发者...
css中position:relative和overflow:hidden之间的问题
09-25
这是由于这些旧版IE浏览器的渲染引擎对CSS标准的实现不完全导致的。正常情况下，`overflow:hidden`应该能够隐藏任何超出父元素边界的子元素，无论其定位如何。 为了解决这个问题，一种方法是将父元素的`position`也...
去除overflow: auto；带来的滚动条（没有滚动条也可以滚动）
weixin_47517731的博客
05-18 582
去除overflow:auto;带来的滚动条
css 让内容可滑动,CSS隐藏滚动条并可以滚动内容效果三种实现方法
weixin_33125137的博客
08-04 2636
本篇文章小编给大家分享一下CSS三种实现隐藏滚动条并可以滚动内容效果代码方法，文中代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。方法1：计算滚动条宽度并隐藏起来演示下面给一个简化版的代码·.......outer-container{width: 360px;height: 200px;position: relative;overflow: hidde...
js 页面无滚动条添加滚轮事件
weixin_30797199的博客
08-13 429
当页面无滚动条时，滑动滚轮时window.onscroll事件不会相应，此时应该去添加滚轮事件 var MouseWheelHandler=function(e){ e.preventDefault(); e=window.event||e; var value; if(e.wheelDelta) value=e.wheelDelta; else if(e.deta...
JQuery实现自定义滚动条
觉醒法师的专栏
05-05 3784
在页面中虽然可以通过CSS修改滚动条的样式,但是部分属性是无法自己修改和设置的，而且不同浏览器存在兼容问题，因此通过JS来实现滚动条在。的环境下也是有必要的。
移动端（七）overflow 阻止 系统滚动条
libufan的博客
07-14 330
消除系统滚动条 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ht...
CSS实现无滚动条滚动效果
log22_rain的博客
11-26 335
如果页面内容太多，溢出了div容器的大小，你想要一个页面可以滚动且不显示滚动条查看页面溢出内容的效果，不妨试试这个CSS样式： （你的div容器类名）{ 让y轴溢出内容部分隐藏且滚动展示 overflow-y: scroll; （没用的话，必要的时候加上!important） } （这个是css3里的自定义滚动条样式） ::-webkit-scrollbar { 让滚动条不显示 display: none; } ...
用 HTML 元素实现自定义的滚动条
sinat_41292836的博客
05-21 1972
用 HTML 元素实现自定义的滚动条 有时，浏览器默认的滚动条不能满足需求，我们要实现自定义的滚动条。借助于鼠标移动事件和滚轮事件，以及内容元素的滚动相关属性，可以很容易地实现这样的需求。下面就来试一试。 我们这次要实现的滚动条需要有以下功能或要素： 可拖动的滑块； 滚动条两端有可以小幅度滚动的按钮； 滑块与两端按钮之间的区域可点击以进行大幅度滚动，这点与常见的滚动条一致； 在内容区域...
html滚动条实现，超简单
热门推荐
qq_33653393的博客
07-04 9万+
在对应的div中，添加overflow,固定高度为400px&lt;div class="panel-body" style="height: 400px; overflow:scroll"&gt; &lt;div style="border: 1px #000000; width: 90%; margin: 0 auto;"&gt; &l...
vue非插件实现列表无限循环滚动
weixin_41683949的博客
07-20 9720
最近刚好有个功能需要实现列表的无限循环滚动，在网上找到vue-seamless-scroll组件，使用起来很方便，也实现我需要的功能。我去查看了插件源码，实现原理还是比较有趣的，所以就参考了一下，自己手动实现个例子。.....................
jQuery 无缝滚动
weixin_30306905的博客
06-08 114
这个效果, 我在用js直接实现的时候, 有兼容问题, 我于是想到jQuery实现. 其实在此之前, 我也没在意过, 既然遇到了, 就把它记录一下. 这是我对无缝滚动的理解, 下面先上图 我来解释一下这个滚动中的图形: 　　蓝色和绿色部分表示我们的内容, 绿色的是内容1, 蓝色的是内容2 　　最外边可以看到有红色的边框(不是很明显), 这个红色的边框设置了overflow:hidden...
overflow:scroll 移动端失效
最新发布
07-20
因此，如果在一个不支持滚动的元素上使用 overflow:scroll，是不会有效果的。 2. 缺乏足够的内容：当容器内的内容没有超出容器的尺寸时，即使设置了 overflow:scroll，也不会显示滚动条。因此，检查一下容器内的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值