overflow实现隐藏滚动条同时又可以滚动

.scroll-list ul{
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0.1rem;
    margin-bottom: -.2rem;
    overflow: -moz-scrollbars-none;
    overflow: -moz-scrollbars-none;
}
.scroll-list ul::-webkit-scrollbar{
    display: none;
}

设置横向滚动时，可以设置overflow-x：auto;

原文地址：https://www.cnblogs.com/niuxiaoling/p/8136324.html

时间： 2024-08-03 12:38:09

overflow实现隐藏滚动条同时又可以滚动的相关文章

CSS 实现隐藏滚动条同时又可以滚动

移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚动的特性.由于只需要兼容移动浏览器(Chrome 和 Safari),于是想到了自定义滚动条的伪对象选择器::-webkit-scrollbar. 关于这个选择器的介绍可以参考:Styling ScrollbarsCustom Scrollbars in WebKit 应用如下 CSS 可以隐藏滚动条: .element::-webki

如何隐藏滚动条但又能滚动

先上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #parent{ overflow: hidden; } #child{ width: 100%; height: 400px; overflow-y: scroll; padding-ri

CSS — 溢出隐藏（隐藏滚动条，依旧可以滚动）

公司的系统,在PC端可以管理我们的公众号,在发布模块页面时有一个预览功能,呈现页面在手机端的样式. 做法很简单,一会就完成了,但是在预览内容过长时手机外框会有一个滚动条,影响美观,于是就想把它去掉,有一个方法个人觉得很好用,记录下. 思路:写两个 div 嵌套在一起,高度都固定,外面的 div 固定宽度并且 overflow: hidden; 里面的div宽度比外面的稍宽,最好算好滚动条的宽度,overflow-y: auto; 初始实现是:  <div clas

纯css，div隐藏滚动条，保留鼠标滚动效果。

代码如下: <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css&qu

css如何实现滚动条隐藏但鼠标仍然可以滚动

在做移动端项目的时候,有些时候需要元素超出屏幕可以滚动,为了美观需要隐藏滚动条.如果只需兼容chrome和safari,可以使用自定义滚动条的伪对象选择器--::webkit-scrollbar. 具体使用即: element::webkit-scrollbar{display:none} 或者 element::webkit-scrollbar{width:0!important} 那要在pc端实现同样的功能怎么办呢?参考Hiding Vertical Scrollbars with Pure

egret：设置滚动视图、隐藏滚动条以及层级的问题

一.设置滚动视图二.隐藏滚动条三.层级问题我将图中list列表内容添加到界面后,我发现右上角的关闭按钮失灵了, 第一反应是将这个按钮的层级设置到最高层, 但是我直接设置后,发现还是有问题. 最后找到原因,因为我将背景(包括关闭按钮)打了组, 将这个组给解组之后在去设置该关闭按钮的层级后: 此时再去点击关闭按钮,就能正常关闭了. 原文地址:https://www.cnblogs.com/WentingC/p/8675492.html

js禁止滚动条滚动并且隐藏滚动条

禁止鼠标滑过滚动条滚动 document.body.onmousewheel = function () {return false;} 恢复鼠标滑过滚动条滚动 document.body.onmousewheel = function () {return true;} 禁止键盘控制滚动条滚动 document.body.onkeydown = function (e) { if (e.keyCode == 38 || e.keyCode == 40) { return false;

iframe滚动条问题：显示/隐藏滚动条

iframe 问题2008-01-22 16:37****** 显示 iframe 内容 XHTML 1.0 Transitional 标准不能显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww

隐藏滚动条

3种方法实现CSS隐藏滚动条并可以滚动内容 2018-03-17539View0 隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1:计算滚动条宽度并隐藏起来在本站的侧栏,你可以看到前端日报的那块内容并没有滚动条,但鼠标移上去却可以滚动内容.这是什么技术呢? 其实我只是把滚动条通过定位把它隐藏了起来. 演示下面给一个简化版的代码 1 <div c