如何解决垂直鼠标在<div>上滚动并带有溢出-x:滚动
我创建了一个简单的帖子容器,该容器可以滚动浏览多个卡片组件。但是,由于大多数用户无法水平滚动(使用常规鼠标),因此我需要从左->右到顶部->底部更改滚动行为,同时执行常规的overflow-x:滚动。有没有一种简单的方法来实现此而不使用jquery ?
我的代码:
.main {
...
height: 100vh;
max-width: 100vw;
overflow-x: hidden;
&__feed {
position: relative;
height: 70vh;
width: 100%;
overflow-x: hidden;
overflow-y: hidden;
&__view {
display: block;
position: relative;
height: 100%;
overflow-x: scroll;
&__items {
position: absolute;
display: flex;
align-items: flex-start;
left: 0;
width: auto;
height: 100%;
// CHILD ELEMENTS (CARDS)
& > * {
width: 18vw;
margin-right: $spacing-xs;
@include media(tab-port) {
word-break: break-all;
width: 21rem;
}
}
}
}
}
}
JSX:
<div className='main'>
<div className='main__feed'>
<Header title={title} />
<div className='main__feed__view'>
<div className='main__feed__view__items'>
{posts && filter === undefined
? posts.map((post) => (
<Card
title={post.title.rendered}
content={post.content.rendered}
category={post.categories[0]}
/>
))
: posts
.filter((post) => post.categories[0] === filter)
.map((post) => (
<Card
title={post.title.rendered}
content={post.content.rendered}
category={post.categories[0]}
/>
))}
</div>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。