标签: horizontal-scrolling

对于一种缩略图水平滑动查看器

如何使水平滚动div内的div强制滚动div水平,而不是到达结尾并开始新的行？

我已经在使用float:left和display:inline-block但它们到达容器的末端并创建一个新行而不是强制容器水平扩展以适应它们因此强制需要水平滚动条

所以div框是强制执行此操作:

[ ][ ][ ][ ][ ][ ][ ][ ][ ][ ]
      <---->scroll

代替:

[ ][ ][ ][ ]
[ ][ ][ ][ ]

码:

<div style="overflow-x: scroll; overflow-y:hidden; width:500px; height: 140px;">
     <div style="width: auto;">
           <div class="box"></div>
           <div class="box"></div>
           <div class="box"></div>
           <div class="box"></div>
           <div class="box"></div>
           <div class="box"></div>
           <div class="box"></div>
           <div class="box"></div>
     <div>
</div>


.box{
    width: 100px;
    height: 100px;
    border: solid 1px black;
    float:left;
    display: inline-block;
}

我觉得我已经搜索了一半的网络并找不到解决方案......
我有一个显示地图的java应用程序(不同的国家等).
目前你可以使用鼠标滚轮向下和向上滚动...
我想要它,你可以横向滚动(水平).
我需要的只是一个Listener(在Swing或Javafx无关紧要),只要鼠标滚轮倾斜就会触发,而不需要地图的焦点(用鼠标悬停应该足够窗户应该仍然聚焦)并且没有任何可见滚动条.

我有一个截图,我已经在小提琴中复制了.在小提琴中我创建了一个父div,其中我提到了所有2行:

<div class="product-all-contents">

<div class="product-contents">
</div>

<div class="product-contents">
</div>

</div>

问题陈述:

我想在移动/平板电脑视图中进行单独的行滚动.我为了使它滚动而尝试的CSS代码如下所示它似乎不起作用.我是否还需要设置最小宽度以使行在移动/平板电脑视图中滚动？

@media only screen and (max-width: 767px)
{
.product-all-contents
{
  overflow-x: auto;
}
} 

当你启动愤怒的小鸟并点击播放时,你会看到一个水平滚动的菜单,其中有一行图像,一旦点击你可以开始游戏,什么不是.我想知道如何使菜单与此类似,因为它横向(水平)滚动并显示可点击的图像？提前致谢!

我非常有兴趣在我的网站上放置一个水平滑动div和我的应用程序的屏幕截图.我想要做的是与这里所做的非常相似.

这是我能找到的相关html:

<div id="screenshot_container" class="screenshot_container">
            <div id="screens" class="screenshots" style="left: 0px;">

                <img alt="Screenshot of iOu (I owe you)Debt Calculator" class="screen2" src="http://lh3.ggpht.com/np-fUQ6p_rWh62eDpB4BtiQOEounRiIaCdI8-KXmcR28hKrDwU0_NnJ3NQQNK1GIsMQipZw3Yy_PtG5cCF7hqU5X=h200" id="screen1">

                <img alt="Screenshot of iOu (I owe you)Debt Calculator" class="screen2" src="http://lh3.ggpht.com/S02i2HMnIRBe6ms6PbYLLJEW5rCxHWUj3wZ25tP5zOMIGYgIdy6211ihD6MJUvUiSm-rwPEJb-fYkBI5MupxBvQ=h200" id="screen2">

                <img alt="Screenshot of iOu (I owe you)Debt Calculator" class="screen2" src="http://lh3.ggpht.com/j6SyrkCI1Vn7vGT3Tf84LeXdSz5ys1rindbmjOrPFExhJEJ-Eny71C0bIk0lEJyVnlxYopMkbhIlCgU7f1RICQ=h200" id="screen3">

                <img alt="Screenshot of iOu (I owe you)Debt Calculator" class="screen2" src="http://lh5.ggpht.com/6J4S5KBiz1FyUZM8S6nD8Xxy3yOU4337Cpus_Z7VMLze_4O00zIIYPUAHMUHtLxRWC9xJbf5lAnjt1cFDRulEjSJ=h200" id="screen4">

                <img alt="Screenshot of iOu (I owe you)Debt Calculator" class="screen2" src="http://lh4.ggpht.com/6vGrgfvQy-nVyiKIt7u2dxthgySj_92-Gt-IbwTZjtepMGqI1Njgj37mxEYVta8xPHm2t3hcJxsrmLzzMRDMRlsD=h200" id="screen5">

                <img alt="Screenshot of iOu (I owe you)Debt Calculator" class="screen2" src="http://lh3.ggpht.com/mcqLEpzbXuCrpK4XI4I_MoxWdS39PrRGxD0_nixDI4_i1p8xh7d6WLrlYYs05HcM2yKb8IQMMeeaEHkQw1syAD0=h200" id="screen6">

            </div>
        <div …

我在这里看到了一些关于这个主题的帖子,但是找不到一个能够解决我试图处理的问题的帖子.

在我的网站上,我有一些博客帖子.我已经设置了infiniteScroll(https://github.com/paulirish/infinite-scroll),它可以正常加载滚动操作触发的下一页内容.我已经设置我的div水平滚动但我无法弄清楚如何修改infiniteScroll脚本(和local.js脚本)由水平滚动而不是垂直滚动触发.

以下是进度:https://adrtimesv6.squarespace.com/library/(您必须输入访问者访问验证码才能在构建时查看).

任何帮助将不胜感激!!我一直在修补和狩猎互联网几天,试图让这个工作....

我的html结构是这样的:

<div class="listWrapper">
    <div id="scroller">
        <article class="item"></article>
        <article class="item"></article>
        ... and so on
    </div>
</div>

我的脚本看起来像这样:

$('#scroller').infinitescroll({
    behavior: 'local',
    binder: $('#scroller'),
    nextSelector: ".pagination .nextPage",
    navSelector: ".pagination",
    itemSelector: ".item",
    animate: false,
    extraScrollPx: 0,
    bufferPx: 235,
    pixelsFromNavToRight: undefined,
});

我修改了infiniteScroll js文件,将所有高度引用更改为宽度,从上到下,从下到右:

;
(function ($) {
    $.fn.infinitescroll = function (options, callback) {
        function debug() {
            if (opts.debug) {
                window.console && console.log.call(console, arguments)
            }
        }

        function areSelectorsValid(opts) {
            for (var key in …

I've used the following css in various places on my site:

http://jsfiddle.net/uycq29mt/1/

.a {
    position:absolute;
    background:red;
    width:600px;
    height:100px;
    left:50%;
    transform: translate(-50%);
}

在Internet Explorer中运行时,您会注意到一个水平滚动条似乎忽略了有关页面总宽度的转换.

反应原生： v0.52.0

平台： iOS

我的FlatList代码：

<FlatList
  horizontal
  pagingEnabled={true}
  showsHorizontalScrollIndicator={false}

  legacyImplementation={false}

  data={this.props.photos}
  renderItem={item => this.renderPhoto(item)}
  keyExtractor={photo => photo.id}

  ItemSeparatorComponent={this.itemSeparatorComponent}
/>

项目分隔符代码：

itemSeparatorComponent = () => {
    return <View style = {
        {
            height: '100%',
            width: 5,
            backgroundColor: 'red',
        }
    }
    />
}

最后是FlatList项目组件：

renderPhoto = ({ item, index }) => {
    return (
        <View style = {{ width: SCREEN_WIDTH, height: 'auto' }}>
          <FastImage 
            style = { styles.photo }
            resizeMode = { FastImage.resizeMode.contain }
            source = {{ uri: …

有没有办法绑定键盘按键以水平滚动？

我尝试了很多不同的事情，但似乎无法将它们放在一起。

感谢您阅读我的问题。

我有一个网站，其中有一个带有图像的 div，设置为溢出：自动；空白：nowrap；因此，您可以在 div 中水平滚动以查看其中的所有图像。我的问题。我可以制作两个按钮（左和右）来水平滚动这个 div。我问这个是因为当我有触摸屏或触控板时，我可以在 div 中滚动，但是当我在只有鼠标的桌面上时，没有滚动 div 的选项。我听说你想只使用滚动条，但我已经隐藏了那些使用 css 的，因为它们在不同的计算机和浏览器上看起来不同，而且只是一个完全的痛苦，对我来说看起来不够干净。这是我的网站（我做了一个页面，我再次解释了这个问题。）https://tuberadar.nl/test1234/

感谢您阅读我的问题。

祝你今天过得愉快！

我看过旋转木马插件，但想知道是否有使用 css 的方法。

    .blackbackgroundscroll {
     background: #fff;
     padding: 8px 8px 8px 8px;
     margin: 12px 0px 5px 0px;
     box-shadow: 0 0px 0px 0 rgba(0,0,0,0.0);
     border: 1px solid #dadce0;
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
     border-bottom-right-radius: 2px;
     border-bottom-left-radius: 2px;
     overflow: auto;
     white-space: nowrap;
     -webkit-overflow-scrolling: touch;
     }

我不知道从哪里开始，因为我也觉得这将需要一些 Javascript 而我没有 JS 经验。