h5页面背景图很长要有滚动条滑动。

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

最近做项目过程中，老大提了个很奇葩的要求

背景图铺满页面，他要求有滚动条可以滑动，他给我讲的思路是用js 获取背景图片的高，在获取当前窗口的高，两者比较，当窗口的高小于背景图片的高，把窗口的高设置成背景颜色的高。反之就是窗口的高。 感觉太麻烦，用css就可以实现他的要求

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">       
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" co
最低0.47元/天 解锁文章
热忱学习
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
长页面滚屏动画
qq_36454089的博客
11-27 914
H5长页面 , 向上滑动 , 页面滚动到元素位置 , 元素显示并做动画显示 , 向下滑动 , 元素不在屏幕显示 , 元素取消动画now类并隐藏 , 方便再次滑动添加动画 Demo使用了 使用animate.css https://www.cnblogs.com/xiaohuochai/p/7372665.html 核心js代码: ...
CSS——设置滚动条出现在body身上
hao_sir
03-16 2231
先看代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> *{ margin: 0; padding: 0; } html{ margi...
网页、h5默认滚动条样式重构
最新发布
范德萨的博客
05-27 273
此文章用于，让我自己快速设置 浏览器、h5 默认滚动条样式……以上就是今天的内容，三Q！
背景图片太大时，而又不出现竖向滚动条的做法
sunny327的专栏
12-04 6139
当设计图做为背景图片太大时，必会出现滚动条，但是项目那边不希望出现滚动条，是一屏显示的，那就可以这样设计Css img{ display:block; width:100%; height:100%;} 这样就可以让图片在页面中平铺，而不产生滚动条，但是有一个问题，当显示器的尺寸很小或13寸显示器的时候，图片会严重变形，但是这是目前来说最好的解决方案了。又不出现滚动条。做适配时也可
H5页面移动端背景图以及文字适配方法
wxxmagic的博客
01-07 3664
H5页面适配的方法 背景的适配 给页面设置背景图，因为适配不同的设备（设备屏幕分辨率不同），所以再给背景图宽高的时候不能全部给100% 背景图（ui设计图）的比例是固定的，这里举例750px*1468px,如果给背景图设置为 background-size: 100% 100%; 那么背景图就会完全填充到整个屏幕，当屏幕的比例不同于你设计图的比例的时候，你的背景图就会有拉伸现象（背景变形） 为了让背景不变形有两种方法 固定宽填充整个屏幕，让高自适应 background-size: 100% auto;
首次开发H5长图页总结
weixin_30765319的博客
04-15 1184
首次开发H5长图页总结. 资源统一加载 资源统一加载, 分开获取 定义资源标识符 在src/resources目录下 定义各个资源模块. 在Asset.js中获取定义好的所有模块, 循环出具体的文件路径, 统一数组. 按照一定规则组件文件id, 方便页面中获取. 暴露方法, 挂载全局 在全局app.init的时候, 进行资源的初始化, 并把初始化的资源对象挂载到Global对象上, 方...
js 简易版滚动条实例(适用于移动端H5开发)
10-19
下面小编就为大家带来一篇js 简易版滚动条实例(适用于移动端H5开发)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
配置H5的滚动条样式的示例代码
09-27
在IE浏览器中，自定义滚动条样式的方法略有不同，但从IE5.5开始也提供了支持。 以下是一些关键的CSS选择器，用于配置H5滚动条样式： 1. `::-webkit-scrollbar`：这是用于定义整个滚动条的通用样式。你可以设置其...
firefox 滚动条消失引起页面抖动的问题
09-25
在网页设计中，滚动条是用户浏览长内容时不可或缺的导航工具。然而，在特定情况下，尤其是在 Firefox 浏览器中，滚动条的显示与隐藏可能会引发一个名为“页面抖动”的问题。这个问题指的是当用户滚动页面时，由于...
微信端滑动滚动效果H5营销页面
03-18
在微信端制作具有滑动滚动效果的H5营销页面是一项常见的技术需求，它能为用户提供流畅、互动性强的浏览体验。H5（HTML5）作为现代网页开发的标准，提供了丰富的功能和工具，使得开发者能够创建出高度动态和交互性的...
h5下拉刷新上拉加载滚动条位置
12-21
而滚动条位置的问题则关系到用户体验的连贯性，确保用户在离开页面后再次返回时，能够直接回到之前查看的位置，这是现代Web应用优化的重要部分。 1. **H5页面返回**：在H5页面间进行导航时，用户可能会通过浏览器的...
html5响应式页面滚动背景图片动画特效
11-18
html5响应式页面滚动背景图片动画特效 html5响应式页面滚动背景图片动画特效 html5响应式页面滚动背景图片动画特效 html5响应式页面滚动背景图片动画特效
h5 实现背景左右滚动效果
weixin_43452154的博客
09-16 2800
用轮播图来进行轮播，网上一大把的轮播插件，直接拿来调试一下即可，将每个图片进行轮播样式轮播即可，不作过多介绍。：该方法运行工作量大，图片需要单独切割，多个轮播图或多个图片，可能会导致有点卡顿。优缺点：流畅度比轮播图效果要好，代码量少、图片整张切，但进行到100%后面重置0%会有闪烁一下效果。下面只介绍左右滚动方法，上下滚动方法掉转即可。将图片切成两张很长的图片，进行轮播。
定时函数和swiper插件
dhnnnna的博客
06-30 314
setTimeout(changeBackgroundColor,1000); 定时关闭 函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。 setInterval(changeBackgroundColor,1000); 重复执行 函数的用法与完全一致，区别仅仅在于指定某个任务每隔一段时间就执行一
html如何实现图片左右滑动效果,HTML+CSS入门 如何实现图片(image) 左右滑动
weixin_35772595的博客
06-03 1万+
本篇教程介绍了HTML+CSS入门 如何实现图片(image) 左右滑动，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<1、需求需要用简单动画的形式将一组图片进行展示，图片数量不固定2、效果如下:3、思路说到动画，首先想到使用-webkit-transition:;因为这个最简单好用,首先将图片都放在左侧，然后根据图片数量计算每个图片的左边距，这样就可以依次排列了。然后就...
ih5长图如何滑动_iH5中级教程：微场景H5必备，横向滑动切换
weixin_28688791的博客
01-17 5423
页面5下添加时间轴，时间轴控制富文本从下往上、从无到有显示。第一个关键帧透明度为0，第二个关键帧透明度为100。重点控件：滑动时间轴、轨迹、透明按钮、富文本知识点：1、滑动放大比例：使用此参数来设定手指滑动的距离对滑动时间轴轴播放进度的控制，默认值为1，即手指按设定方向划过滑动时间轴整个范围时，滑动时间轴会从起点播放到终点。滑动放大比例越小，动画越平稳，越大，速度越快。2、自动跳转控制点：自动...
滚动触发页面（长页面）
高压锅博客
08-30 716
body{ background: url(../css/imgs/1.jpg) no-repeat 50% 0; font-family: 'helvetica Neue', sans-serif; color: #FFF; background-size: cover; } #slogan1,#slogan2,#slogan3{ posi
只用html就可以实现图像的左右滚动效果
热门推荐
lihai211的专栏
07-25 2万+
标签是用来实现内容的滚动；其属性scrollamount 表示滚动的速度，direction表示滚动的方向
样式渲染优先级
qq_43338177的博客
10-16 279
#passage{color: yellow; } span{color: green;display: block;display: inline;} [data-color=red]{color: red;} <span id="passage" data-color="red" style="color:blue;">颜色</span> 这段代码的意思是：当内联...
h5页面超出部分在下面展示可滑动并且没有滚动条
05-24
你可以使用CSS属性 `overflow: auto;` 来实现超出部分在下面展示并且可滑动的效果。同时，为了隐藏滚动条，你可以添加 `::-webkit-scrollbar {display: none;}` 到你的CSS样式中。 下面是一个示例代码： ``` <div class="container"> <!-- 这里放置你的内容 --> </div> <style> .container { height: 200px; overflow: auto; } .container::-webkit-scrollbar { display: none; } </style> ``` 在上面的代码中，我们将一个容器的高度设置为200px，并且添加了 `overflow: auto;` 属性，这样当内容超出容器高度时，就会自动出现滚动条。为了隐藏滚动条，我们添加了 `::-webkit-scrollbar {display: none;}` 属性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值