开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何创建一个水平滚动导航栏，使用CSS和/或JavaScript，当使用手指滚动时，在手机上工作？

创建一个水平滚动导航栏，可以使用CSS来设置样式，并使用JavaScript来增强交互性，特别是在移动设备上。以下是一个基本的实现方法：

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平滚动导航栏</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="scroll-container">
    <nav class="scroll-nav">
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <!-- 更多链接 -->
    </nav>
</div>
<script src="script.js"></script>
</body>
</html>

CSS样式

/* styles.css */
body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.scroll-container {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* 在iOS上启用惯性滚动 */
}

.scroll-nav {
    display: inline-block;
}

.scroll-nav a {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    font-size: 18px;
}

.scroll-nav a:hover {
    background-color: #f0f0f0;
}

JavaScript增强交互

// script.js
document.addEventListener('DOMContentLoaded', function() {
    var container = document.querySelector('.scroll-container');
    container.addEventListener('touchstart', handleTouchStart, false);
    container.addEventListener('touchmove', handleTouchMove, false);

    var xDown = null;
    var yDown = null;

    function handleTouchStart(evt) {
        xDown = evt.touches[0].clientX;
        yDown = evt.touches[0].clientY;
    };

    function handleTouchMove(evt) {
        if (!xDown || !yDown) {
            return;
        }

        var xUp = evt.touches[0].clientX;
        var yUp = evt.touches[0].clientY;

        var xDiff = xDown - xUp;
        var yDiff = yDown - yUp;

        if (Math.abs(xDiff) > Math.abs(yDiff)) { /* 识别为水平滚动 */
            if (xDiff > 0) {
                /* 向左滑动 */
                container.scrollLeft += 50; // 可以根据需要调整滚动速度
            } else {
                /* 向右滑动 */
                container.scrollLeft -= 50;
            }
        }

        /* 重置值 */
        xDown = null;
        yDown = null;
    };
});

应用场景

这种水平滚动导航栏适用于需要在有限空间内展示多个链接的情况，例如网站的页脚、侧边栏或者移动应用中的菜单。

遇到的问题及解决方法

滚动不流畅：确保在CSS中设置了-webkit-overflow-scrolling: touch;，这有助于在iOS设备上实现流畅的滚动效果。
触摸事件处理不当：JavaScript中的触摸事件处理需要精确计算触摸点的移动距离和方向，以确保正确的滚动行为。
兼容性问题：对于不支持触摸事件的旧设备，可以考虑使用鼠标滚轮事件作为备选方案。

通过上述方法，你可以创建一个在手机上使用手指滚动时能够工作的水平滚动导航栏。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

移动端web开发笔记

不管当前有多少只手指 touchmove——当手指在屏幕上滑动时连续触发。...通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动 touchend——当手指离开屏幕时触发 touchcancel——系统停止跟踪触摸时候会触发...比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态...19、如何禁止保存或拷贝图像（IOS）通常当你在手机或者pad上长按图像 img ，会弹出选项存储图像或者拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止： img {...解决页面闪白保证动画流畅设计高性能CSS3动画的几个要素尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位利用translate3D

3.7K2 0

CSS 中关于 Overflow ，你需要了解的这些知识点！

大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。 Hidden ? 当内容比其父内容长时，它将被剪切。但是，可以使用 Javascript 滚动内容。 Scroll ?...Overflow-Y 该家伙负责y轴或元素的垂直边。用例和事例简单滑块我们可以通过水平裁剪内容并使其滚动来创建快速简单的滑块。 ?...大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。 Overflow的常见问题：在手机上滚动例如，当我们有一个滑动条时，仅仅添加overflow-x是不够的。...touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...如果没有必要，则必须删除它或编辑position值。 grid 项目 CSS 网格有三种情况可以导致水平滚动，来看看它们。对列使用像素值 ? 当使用像素值时，这将在视口宽度较小时引起问题。

5.3K2 0

从零开始学 Web 之移动Web（二）JD移动端网页，移动触屏事件

-- 导航栏结束 --> <!...window.onload = function () { bannerEffect(); timeCount(); slideshowEffect(); }; // 搜索栏上下滚动时改变透明度...轮播图的手动滑动效果 // 2.1、记录手指的起始位置 // 2.2、记录手指滑动时与起始位置水平轴的偏移距离 // 2.3、设置当手指松开后，判断偏移距离的大小，决定回弹还是翻页...添加过渡效果结束事件，解决手动滑动到第一张和最后一张时，出现空白的问题。设置小白点，在自动轮播和手动轮播两个地方添加。 2、在手动轮播的时候，一定记得将自动轮播时的过渡效果清除。...还要关闭定时器，在手指离开的时候再次设置是定时器。关于手动轮播的相关触摸事件知识点在下面介绍。

2.7K1 0

手势魅力-设置一个触摸菜单

或另一篇文章。或两者今天，我们要告诉你如何用手势创建一个本地菜单 ? 让羊驼走上舞台！所以，在我转向实际的代码之前，在那里有一些我想要经历的事情，所以请耐心等待 HTML结构 <!...在这种情况下在那里是: touchstart:当你触摸DOM元素时触发 touchmove:当你沿着DOM元素拖动手指时触发 touchend:当你从DOM元素中移除手指时触发在这些事件中，我将使用触摸属性...你想在菜单后面加一个遮罩,当你打开它时会变得越来越暗吗? 在我的情况下，我只希望手势的方向是水平的，因为我希望滚动功能正常。我有限制，并且我希望它回到开始或结束。...为了可读性,在函数中没有太多的代码行，我把它们全部分成了小的一行这个手机触摸手势最后有趣的一部分现在我对触摸事件,变量和函数的解释已经不存在了,现在是我关注如何创建动画的时候了。...这绝对不是你想要用你的手机触摸手势发生的事情，所以考虑一下：当你打开/关闭菜单时，你是否有兴趣阅读滚动隐藏的内容？如果你的拖拽方向是水平的，你就不能滚动 ? 我们需要一些边界在这里！

1.9K4 0

如何使用 CSS 设置和自定义水平和垂直滚动条

例如，您可以定制滚动条样式以匹配网站的外观和感觉。在本文中，我们将讨论何时设置水平和垂直滚动条，如何设置它们以及如何使用CSS自定义它们的外观。...在本节中，我们将按照以下步骤创建一个可滚动的侧边栏导航：a）创建带有导航项目的导航栏b）将导航栏样式设置为侧边栏c）将侧边栏位置设置为固定d）使用滚动条管理项目的溢出a)....创建带有导航项目的导航栏为了创建导航栏，我们将使用HTML nav元素。...我们的导航栏将包含以下项目：主页商店市场产品卖家制造商分销商连锁经理银行我们在这一步的目标是创建一个如下截图所示的导航栏：导航栏可以使用下面的代码片段创建上述项目的初始导航栏： a{...下面的截图显示了我们即将创建的侧边栏：侧边栏要创建上面的侧边栏，我们将在CSS中进行以下更改：将导航栏的显示更改为flex，并将方向设置为column为侧边栏设置背景颜色为导航链接添加底部边框增加导航链接的字体大小和字体粗细为侧边栏设置固定宽度增加

1.9K0 0

武汉移动网站优化的五大要点

简化功能，在手机上填写表格并不像在台式机上那么容易，因此简单明了的显示和设计以及减少的步骤将使用户更容易操作。　　...如果它是一个独立的移动网站，当移动用户输入桌面网站URL时，对用户自动重定向到移动网站URL至关重要。同样，当桌面用户因任何原因错误地访问移动链接时，他们应自动重定向到桌面网站。　　...3.修剪不重要的内容和功能　　顶部的两个或三个导航栏对于桌面中文网站设计非常普遍，但在手机上显然是不合适的。通常的做法是在移动版本上减少导航系统，包括顶部导航，面包屑和侧栏。...如果完全保留主导航，则在用户单击时必须折叠并展开。如果它们出现，最多五个或六个顶部导航栏。汉堡菜单是一种流行且令人愉悦的移动浏览体验。　　...不要阻止CSS，JavaScript或图像，在过去，一些移动设备无法支持所有这些元素，因此移动网站的网站管理员阻止了三个中的一个或全部。

1.5K0 0

CSS中，如何处理短内容和长内容？

当我们使用 CSS 构建布局时，考虑长短文本内容很重要，如果能清楚地知道当文本长度变化时需要怎么处理，可以避免很多不必要的问题。...当添加padding时，会导致显示下一行的一部分，这本应该要被截断的。见下图： image.png 水平滚动有时候，截断或连接一个单词并不总是可行。...例如，当一个长字换成新行时，JavaScript代码可能会变得难以阅读。在这种情况下，水平滚动将使阅读体验更好。...在这种情况下，最好为导航项设置最小宽度。 .nav__item { min-width: 50px; } image.png 文章内容一个长词或一个链接是很常见的，尤其是在手机上。...考虑以下 image.png 上面有一个很长的单词，它会上容器溢出导致水平滚动。我们可以通过使用overflow-wrap或hyphens来解决这个问题。

1.8K4 0

Demoo使用秘籍，比好用更好用 - 腾讯ISUX

对于每一位设计师的日常工作来说，如何有效阐述自己的方案是非常关键的一步，如果只是一张原型图方案，无论标注得多么清楚，都会有一定的沟通理解成本，所以通常都会需要一个原型demo来帮助大家对方案进行直观的演示...通过上传平面稿件，用手势或触点热区的方式把界面关系连接起来，加入连接转场特效，输出一份仿真APP的、可体验操作的设计方案，满足在电脑、会议投影现场及手机上体验操作。...Step3.为长页面固定滚动区域涉及技巧：记住顶部bar和底部导航的高度，准确设定滚动区域不留白以图示为例，动态页面非常长，需要模拟页面滚动的效果，实际app中，顶bar和底部导航是不会动的，这时候...这里Demoo有一个值得赞美的小细节是，当你拖动锚点时，会放大显示页面中间的位置，并且展示锚点拖动的像素值，所以你只要记住顶bar和底部导航的高度，你一定可以拖到一个完美的位置，没有白边。 ?...Step6.在手机中预览原型效果涉及技巧：将原型添加到手机桌面，模拟最真实的app体验 Demoo支持大家用手Q扫一扫在手机上查看原型，然而在手Q里打开链接特别不稳定，一不小心返回了，又要重新扫一遍二维码

1.6K4 0

2024年，你需要了解下这 12 个现代化 CSS 新属性

就像你在手机上设置壁纸时，图片会覆盖整个屏幕，但不会拉伸变形。 scale-down：如果需要，图片会在元素内调整大小，以便完整显示而不被剪切，并保持其宽高比。...传统上，我们可能会使用box-shadow或伪元素来创建元素焦点时的自定义轮廓。但其实，有一个自2006年就已存在的CSS属性可能被许多人忽略了——outline-offset。...scroll-margin的作用 scroll-margin系列属性允许你为元素在滚动位置上下文中添加一个偏移量。这在处理诸如固定导航栏遮挡锚点链接内容时特别有用。...特别是在有限维度的滚动区域（如侧边栏或滚动框），当滚动到达边界时，滚动行为可能会传递给背景页面，这可能会给用户带来不便。为了解决这个问题，CSS提供了一个属性overscroll-behavior。...overscroll-behavior属性允许开发者控制滚动区域的边界行为。当设置为contain时，它可以阻止滚动行为从一个滚动容器传递到其父容器或背景页面。

1.7K1 0

吸顶效果解决方案

页面向下滚动超过吸顶元素初始位置时，把吸顶元素固定在顶部要求吸顶的元素一般是二级导航栏、搜索框、文章标题栏（h1）、表头（thead）、tab条等等，共同特点是在内容或功能上比较重要，但又不是最重要的元素...-> 滚动 -> 手指抬起 -> 惯性滚动 -> 停止滚动整个过程，直到停止滚动时才会触发1次scroll事件，也就是说，IOS8以下的scroll变成了scrollend。...，iscroll等等有前辈做了详细测试，见参考资料1 定时器在手指没有离开屏幕时不会执行，touchmove触发频率足够，也能拿到scrollTop，但touchend后，惯性滚动期间，没有任何事件可用...IOS 8+的Safari和WKWebView能够疯狂触发scroll，无论手指在不在屏幕上，无论是不是惯性滚动期间。...CSS sticky并不能解决这个问题笔者还没有找到合适的解决方案，目前方案是牺牲tab浏览状态独立性，多tab共用body的滚动条，切换tab时滚回之前的位置。

3.6K1 0

手机网页布局经验总结

今天我们就来探讨一下这个问题阅读读者具备基础 1、熟练的使用HTML和CSS 2、对HTML5和CSS3有一定的了解，这个不必深入 3、掌握JavaScript、jquery脚本语言如果还不能具备以上基础的读者们建议你们还是去网上找一下其他的一些相关的教学贴看一看...因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获取滚动条的值呢？...http://www.fishlee.net/Tools/GetImageBase64Code#codeResult 移动端特殊的事件在HTML5出现之后，有一些新的事件 touchstart //当手指接触屏幕时触发...touchmove //当已经接触屏幕的手指开始移动后触发 touchend //当手指离开屏幕时触发 touchcancel//当某种touch事件非正常结束时触发执行事件的顺序：touchstart...} 设置placeholder时候 focus时候文字没有隐藏 input:focus::-webkit-input-placeholder{ opacity: 0; } android局部滚动时隐藏原生滚动条

2.1K6 0

waypoint_使用jQuery Waypoint创建粘性导航标题

waypoint 在本教程中，我们将创建一个导航栏，当您向下滚动时，它会陪伴您-我们还将在混合中添加一两个two头以对其进行修饰。...我们会做什么在本教程中，我们将使用HTML5的新元素之一nav标签作为水平链接列表的容器。我将简要说明如何使用一些CSS使它看起来更漂亮。...稍微增加一点，我们将使用另一个插件ScrollTo ，以便在用户单击导航链接时提供平滑的滚动和方便的定位。步骤1：盒子我确定您已经熟悉HTML5引入的各种新元素。...使用::after伪元素创建完成导航栏功能区外观的小“阴影”。它们的宽度和高度以及边界半径也使用百分比设置。...向下滚动时，我们将扩展其高度，并且下面的内容保持不变。不过有一个问题-要使其正常工作，您可能希望导航栏周围的任何垂直边距都应应用于nav-container而不是nav 。就是这样！

3.4K3 0

移动Web学习笔记

当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景，设置 -webkit-tap-highlight-color: transparent时就不会产生这个背景..., 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。...继续滚动的速度和持续的时间和滚动手势的强烈程度成正比 10. pointer-events: none 解释：当鼠标点击设置了pointer-events: none属性的标签时，标签不起作用，会出现类似于标签的禁用效果点击此处查看详细解释...自定义滚动条的样式 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条... *解释：使用制作搜索框，当在手机上点击搜索框时会弹出一个软键盘，软键盘上的enter按钮会以搜索按钮的形式显示 27

1K3 0

【IOS开发基础系列】UIScrollView专题

1 UIScrollView原理在滚动过程当中，其实是在修改原点坐标。当手指触摸后,scroll view会暂时拦截触摸事件,使用一个计时器。...ScrollView本身不能绘制，除非显示水平和竖直的指示器。滚动视图必须知道内容视图的大小，以便于知道什么时候停止；一般而言，当滚动出内容的边界时，它就返回了。 ...一个滚动视图也可以控制一个视图的缩放和平铺。当用户做捏合手势时，滚动视图调整偏移量和视图的比例。当手势结束的时候，管理视图内容显示的对象，就应该恰当的升级子视图的显示。...当手指触摸后, scroll view会暂时拦截触摸事件,使用一个计时器。...directionalLockEnabled 默认是 NO，可以在垂直和水平方向同时运动。当值是 YES 时，假如一开始是垂直或者是水平运动，那么接下来会锁定另外一个方向的滚动。

6603 0

第134天：移动web开发的一些总结（二）

自定义tao事件原理：在touchstart、touchend的记录时间、手指位置，在touchend时进行比较，如果手指位置为同一位置(或允许移动一个非常小的位移值)且时间间隔较短（一般认为是200ms...(3) 弹性滚动，下拉刷新 ①弹性滚动：当客户端的页面滚动到顶部或底部的时候，滚动条会收缩并让我们多滑动一定距离。通过缓冲反弹的效果，带给用户良好的体验。...当一个css3动画结束时，我们可以监听相关事件AnimationEnd，比如对于webkit来说，是webkitAnimationEnd。...效率更高，因为css3直接使用浏览器的GPU（图形处理器）渲染 2）当你给一个元素设置它的百分比宽度的时候，他需要一个比照，也就是父元素，但是当它没有父的时候，需要给他一个绝对定位absolute值，...在手机上和平板设备上的版本，是创建移动web app的框架。

1.8K1 0

scroll-behavior & scrollIntoView 的使用，以及解决ios手机不兼容的问题

前言在平时的日常开发中，我们可能会遇到这样的需求，点击一个导航链接，页面会定位到一个元素或上去。如下图vue官网所示，我点击左侧导航栏链接，右边会定位到相应的位置。...一、scroll-behavior MDN上是这么介绍该css属性的：当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，css属性 scroll-behavior 为一个滚动框指定滚动行为...inline（可选）：定义水平方向的对齐，值为 start, center, end, 或 nearest之一。默认为 nearest。...缺点它的缺点主要还是兼容性问题，兼容性也不是很好，浏览器兼容性如下：在ios手机上，一样会没有平滑滚动效果.但是，我们可以借助一个第三方插件，能够使ios手机支scrollIntoView的平滑滚动效果...，效果如下：以上就是关于css中的scroll-behavior属性和js中的scrollIntoViewAPI使用方法，以及如何解决ios手机兼容性的问题。

3.5K1 0

移动开发实用

不管当前有多少只手指 touchmove 当手指在屏幕上滑动时连续触发。...通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动 touchend 当手指离开屏幕时触发 touchcancel 系统停止跟踪触摸时候会触发。...不管当前有多少只手指 MSPointerMove 当手指在屏幕上滑动时连续触发。...通常我们再滑屏页面，会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生：阻止页面滚动MSPointerUp——当手指离开屏幕时触发移动端click屏幕产生...zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态

6.5K3 0

jimojianghu

，可以使用如下的 CSS 和 JS 两种方法。...css 处理只要在页面上使用css样式 touch-action: none，就能禁止web在手机或平板上的缩放了。...用于设置触摸屏用户如何操纵元素的区域，允许你在触控时控制滚动操作。例如，浏览器内置的缩放功能。这样做的好处还有，它可以允许你自己实现这些手势。...none 当触控事件发生在元素上时，不进行任何操作。 pan-x 启用单指水平平移手势。可以与 pan-y 、pan-up、pan-down 和／或 pinch-zoom 组合使用。...可以与 pan-x 、pan-left 、pan-right 和／或 pinch-zoom 组合使用。 manipulation 这是pan-x pan-y pinch-zoom的别名。

3.8K0 0

仿腾讯课堂固定滚动列表ReactNative组件

跑起来运行后发现的一个严重的问题是，如果Tab导航控件的内容区域存在ScrollView或者ListView时，无法滚动，只有最外层可以滚动，也就是手势滚动被拦截了？...一个是怎么判断手势滑动以及外层滚动容器到底部和内层滚动到顶部？第二个是寻找滚动组件并通知内层滚动组件开始滚动？...剩下最后一个如何通知内层容器滚动呢？先卖个关子，在解决这个问题之前，我们先来了解下Android中的View事件是如何传递的。正所谓知己知彼，百战不殆，看看Android触摸事件类型有哪些？...如何封装RN组件参考 RN 0.51中文文档，我们需要做这些东西：原生上要做的事 1.创建原生固定滚动控件 2.创建管理滚动控件ViewManager的子类 3.创建实现了ReactPackage...接口的类 JavaScript上要做的事 4.实现对应的JavaScript模块开始动手 1.创建原生固定滚动控件根据前面的分析，我们知道写原生滚动控件主要是重写控制拦截事件方法onInterceptTouchEvent

4.9K7 0

接上一篇事件详解

事件类型： DOM3级事件规定了以下几类事件；如下： UI事件：当用户与页面上的元素交互时触发； load事件：当页面加载完后(包括所有图像，所有javascript文件，css文件等外部资源)，就会触发...理解客户区坐标位置含义是：鼠标指针在可视区中的水平clientX和垂直clientY坐标；理解页面坐标位置pageX和pageY： pageX与pageY是指页面坐标的位置，与clientX和clientY...)，在Ajax应用中，开发人员经常使用url参数列表保存状态或导航信息；我们必须把hashchange事件添加到window对象中，然后当url参数列表只要发生变化就会调用此事件，此事件对象event...，即使是一个手指放在屏幕上也会触发。...touchmove:当手指在屏幕上滑动时连续地触发，这个事件发生期间，我们可以使用preventDefault()事件可以阻止滚动。 touchend: 当手指从屏幕上移开时触发。

1.9K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭