正文 

当前位置： 首页 > 知识 >

使用jQuery在区域中水平滚动[重复]

     2023-03-10     175

关键词：

【中文标题】使用jQuery在区域中水平滚动[重复]【英文标题】：Scroll horizontally in area with jQuery [duplicate] 【发布时间】：2017-02-15 06:01:21 【问题描述】：

我目前正在做一个项目，我已经介入了一大堆....一些不开心的事情。

这个想法很简单 我有

    具有 200px width 和 display:inline-block 属性的项目的区域

    包装器

    white-space: nowrap;
width: 100%;
overflow-x: auto;

现在，当您在包装器区域滚动时，我需要让它水平滚动。我在JQuery 中听说过DOMMouseScroll 和鼠标滚轮（我猜）。但是我的大脑无法达到正常的解决方案。

任何帮助/提示？

解决方案：https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

只是水平滚动，这就是我需要的......

【问题讨论】：

【参考方案1】：

可以使用jquery mousewheel插件https://github.com/jquery/jquery-mousewheel

$('.wrapper').mousewheel(function(event, delta) 
      this.scrollLeft -= delta * 200;
      event.preventDefault();
);

https://jsfiddle.net/chukanov/5gdzqhhk/3/

【讨论】：

是的，这就是我用的，谢谢@Anton Chukanov $(".horizo​​ntal-scroll").mousewheel(function(event, delta) this.scrollLeft -= (delta * 30); event.preventDefault(); );【参考方案2】： 
* 
  margin: 0;
  padding: 0;


body 
  background: #000;
  font-family: Georgia;
  font-size: 34px;
  font-style: italic;
  letter-spacing: -1px;
  width: 12000px;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;


.section 
  margin: 0px;
  bottom: 0px;
  width: 4000px;
  float: left;
  height: 100%;
  text-shadow: 1px 1px 2px #f0f0f0;


.section h2 
  margin: 50px 0px 30px 50px;


.section p 
  margin: 20px 0px 0px 50px;
  width: 600px;


.black 
  color: #fff;
  background: #000 url(http://i.imgur.com/pZWuILO.jpg) no-repeat top right;


.white 
  color: #000;
  background: #fff url(http://i.imgur.com/LVp6aFC.jpg) no-repeat top right;


.section ul 
  list-style: none;
  margin: 20px 0px 0px 550px;


.black ul li 
  float: left;
  padding: 5px;
  margin: 5px;
  color: #aaa;


.black ul li a 
  display: block;
  color: #f0f0f0;


.black ul li a:hover 
  text-decoration: none;
  color: #fff;


.white ul li 
  float: left;
  padding: 5px;
  margin: 5px;
  color: #aaa;


.white ul li a 
  display: block;
  color: #222;


.white ul li a:hover 
  text-decoration: none;
  color: #000;


<div class="section black" id="section1">
  <h2>Section 1</h2>
  <p>
    MY Spectre around me night and day Like a wild beast guards my way; My Emanation far within Weeps incessantly for my sin.
  </p>
  <ul class="nav">
    <li>1</li>
    <li><a href="#section2">2</a></li>
    <li><a href="#section3">3</a></li>
  </ul>
</div>
<div class="section white" id="section2">
  <h2>Section 2</h2>
  <p>
    ‘A fathomless and boundless deep, There we wander, there we weep; On the hungry craving wind My Spectre follows thee behind.

  </p>
  <ul class="nav">
    <li><a href="#section1">1</a></li>
    <li>2</li>
    <li><a href="#section3">3</a></li>
  </ul>
</div>
<div class="section black" id="section3">
  <h2>Section 3</h2>
  <p>
    ‘He scents thy footsteps in the snow Wheresoever thou dost go, Thro’ the wintry hail and rain. When wilt thou return again?

  </p>
  <ul class="nav">
    <li><a href="#section1">1</a></li>
    <li><a href="#section2">2</a></li>
    <li>3</li>
  </ul>
</div>

$(function() 
          $('ul.nav a').bind('click', function(event) 
            var $anchor = $(this);
            /*
            if you want to use one of the easing effects:
            $('html, body').stop().animate(
                scrollLeft: $($anchor.attr('href')).offset().left
            , 1500,'easeInOutExpo');
             */
            $('html, body').stop().animate(
              scrollLeft: $($anchor.attr('href')).offset().left
            , 1000);
            event.preventDefault();
          );
        );

请查看此链接：-http://codepen.io/SitePoint/pen/WrZmME & https://www.sitepoint.com/10-jquery-horizontal-scroll-demos-plugins/ & http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/

【讨论】：

如何在jquery中水平滚动textarea？

...域。你能建议我们如何滚动文本区域吗？我们可以在其中使用iscroller吗？【问题讨论】：任务完成检查小提琴..jsbin.com/OHaNENu 查看详情

如何在 Android 中水平滚动 ImageView？

...服务器显示到ImageView。我的imageView填满整个屏幕，为此我使用android:scaleType="centerCrop"。但是当使用centerCrop时不能显示 查看详情

在 SwiftUi 中水平组合和打破垂直滚动视图？

...发布时间】：2020-10-3010:50:21【问题描述】：有谁知道如何使用SwiftUi将VerticalScrollView分解为小的水平ScrollView：我有下面的代码，它垂直显示youtubeResults，因为ForEach的每个项目都较 查看详情

在 tableview 中水平滚动以及正常的垂直滚动

】在tableview中水平滚动以及正常的垂直滚动【英文标题】：Scrollinghorizontallyinthetableviewalongwithnormalverticalscroll【发布时间】：2011-09-1320:20:29【问题描述】：我的要求是在表格视图中列出板球运动员的姓名及其统计数据，如下所示... 查看详情

如何在 Android 中水平/垂直滚动全景图像？

】如何在Android中水平/垂直滚动全景图像？【英文标题】：Howtohorizontal/VerticalscrollapanoramicimageinAndroid?【发布时间】：2016-03-1509:37:37【问题描述】：我正在寻找一种在Android中进行滚动或扫描全景图像的方法。有了这个，我的意思... 查看详情

java示例代码_在可调整大小的JTable的单列中水平滚动

java示例代码_在可调整大小的JTable的单列中水平滚动 查看详情

iPhone UIImageView 在 UIScrollView 中水平滚动 - 中心图像？

】iPhoneUIImageView在UIScrollView中水平滚动-中心图像？【英文标题】：iPhoneUIImageViewhorizontallscrollinginUIScrollView-Centerimage?【发布时间】：2012-01-2514:37:26【问题描述】：我有根据屏幕大小下载和调整图像大小以适应图像全屏的方法。最... 查看详情

在 Table View Controller 中水平滚动 UITableView

】在TableViewController中水平滚动UITableView【英文标题】：ScrollUITableViewhorizontalinTableViewController【发布时间】：2019-11-2105:03:30【问题描述】：我有一个表视图控制器场景，它有一个表视图控制器，它有一个表视图，它有一个表视图单... 查看详情

UICollectionView 中水平滚动的单元格消失

】UICollectionView中水平滚动的单元格消失【英文标题】：CellsdisappearingwithhorizontalscrollinginUICollectionView【发布时间】：2017-05-1922:29:52【问题描述】：我被这个奇怪的问题困扰了一段时间，似乎无法弄清楚。设置A是UICollectionViewB是A的... 查看详情

HTML 表格：仅在需要时在 td 中水平滚动

】HTML表格：仅在需要时在td中水平滚动【英文标题】：HTMLtables:horizontalscrollinatdonlywhenneeded【发布时间】：2012-03-3017:31:00【问题描述】：我有一张桌子，上面有以下内容：<tablecellpadding="2"cellspacing="0"><tr><td>Contact:</t... 查看详情

IOS中水平滚动视图问题内的滑块

】IOS中水平滚动视图问题内的滑块【英文标题】：SliderinsideHorizontalscrollviewissueinIOS【发布时间】：2016-10-2115:50:52【问题描述】：我的布局在一个水平滚动的scrollview中有几个sliders。问题是当我尝试拖动滑块时它不会移动，而是滚... 查看详情

对 SwiftUI 中水平滚动视图内的列表不起作用的操作

...现了删除方法，我也可以滚动列表或滚动视图，但我不能使用删除操作。我想知道是否有什么办法可以克服这个问题，也许是当手指在单元格 查看详情

matplotlib中水平条形图的注释[重复]

...0-1320:55:18【问题描述】：我需要注释水平条形图。我可以使用matplotlib网站中显示的示例来注释垂直条形图，但类似的Horizo​​natl想法似乎不起作用。以下是垂直的小型工作示例frompylabimport*ops=90* 查看详情

VBA Excel在多行中水平对齐图片

...描述】：从我尝试修改的一些示例VBA代码中，我的目标是使用VBA学习Excel，并希望获得指导以水平对齐图片，例如一行中的5张图片，然后在新行下方开始并重复。现在我使用硬值5，只是为了让它发生一次，尽管结果不是我所期... 查看详情

如何在 PagedGridView 中水平对齐中心的加载图标？

...【发布时间】：2021-12-1309:04:01【问题描述】：我正在尝试使用无限滚动在PagedGridView中显示新闻项目，以一次加载有限数量的数据。一切正常，但我在获取额外数据时陷入了管理加载指示器的对齐问题。加载图标向右对齐，而我... 查看详情

如果文本溢出，则在 UITableViewCell 中水平滚动 UITextField

】如果文本溢出，则在UITableViewCell中水平滚动UITextField【英文标题】：HorizontallyscrollUITextFieldinaUITableViewCelliftextoverflows【发布时间】：2015-08-1614:57:12【问题描述】：如果文本溢出，我如何能够水平滚动UITableViewCell中的UITextField？我... 查看详情

在 iOS 中水平读取 UIWebView 中的 PDF

】在iOS中水平读取UIWebView中的PDF【英文标题】：PDFReadinginUIWebViewwithhorinzontallyiniOS【发布时间】：2014-05-2304:36:34【问题描述】：用于在iOS中水平读取UIWebView中的PDF文件。所以我写了以下内容以添加UIScrollView以水平滚动。UIScrollView*s... 查看详情

shift+滚动到scrollvieweruwp中水平滚动(代码片段)

...以我的处理程序永远不会被调用。为了解决这个问题，我使用了AddHandler方法，如"RoutedEventsOverview"文章中所述。这有效...但似乎在ScrollViewerruns其内部代码后运行我的代码。结果是ScrollViewer内容垂直平移，然后水平平移。它们似乎... 查看详情