html左右滚动div隐藏部分div,只让DIV出现横向滚动条,窗口不要有滚动条

可以使用CSS中的overflow属性实现这个效果。

首先，在HTML中，我们需要将要滚动的内容放在一个div中，然后再将这个div放在另外一个div中，这个父级div设置宽度，同时设置overflow-x属性为scroll，这样就可以出现横向滚动条了。然后，我们再将父级div的overflow-y属性设置为hidden，这样就可以防止出现纵向滚动条，即使内容超出了父级div的高度也不会出现。

具体的代码如下：

<div class="parent">
  <div class="child">
    <!--这里放要滚动的内容-->
  </div>
</div>

.parent {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
}

.child {
  width: 200%;
  /*这里的宽度可以根据实际情况设置，用来使内容超出父级div的宽度*/
}

这样设置后，就可以实现只出现横向滚动条，而没有纵向滚动条的效果了。

相关问题

隐藏滚动条、保留div横向 鼠标滚动效果

隐藏滚动条并且保持`div`元素在水平方向上能够随着鼠标滚轮滚动的效果通常是在响应式设计或者需要优化视觉体验的情况下使用的。这可以通过CSS样式来实现：

1. **隐藏滚动条**：你可以使用`:hover`伪类以及`overflow`属性来让滚动条只有在需要的时候才显示出来。例如：

   .scrollable {
     overflow: auto;
     -ms-overflow-style: none; /* IE 和 Edge */
     scrollbar-width: none; /* Firefox */
   }
   
   .scrollable:hover {
     overflow-y: scroll;
     scrollbar-width: thin; /* 或者自定义宽度 */
   }

2. **保留横向滚动**：为了仅允许水平滚动，可以设置`overflow-x`为`auto`，`overflow-y`为`hidden`，这样只会显示水平滚动条：

   .scrollable-horzonly {
     overflow-x: auto;
     overflow-y: hidden;
   }

这样，当用户将鼠标悬停在`div`上方时，滚动条才会出现并允许他们在水平方向上滚动内容。

div横向滚动条无效

如果你想让 `div` 元素横向滚动，可以使用 CSS 属性 `overflow-x: auto;`。确保你的 `div` 元素具有固定的宽度，并且它的内容宽度超过了这个固定宽度，这样就可以出现横向滚动条了。以下是一个示例代码：

<div style="width: 300px; overflow-x: auto;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod vel nisi quis ultrices. Sed pharetra mi eget ex hendrerit, eu bibendum tellus aliquet. Donec imperdiet, justo in commodo elementum, est eros imperdiet sapien, ut pharetra odio magna et ligula. Aliquam vel justo nec purus dignissim bibendum. Sed ut nibh eu nulla tempor vestibulum sit amet ac quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce sed dolor lorem. Nullam bibendum eros eget faucibus fringilla. Maecenas a rhoncus leo, ac gravida odio.</p>
</div>

如果你仍然无法看到横向滚动条，请检查一下是否有其他 CSS 属性或 JavaScript 代码干扰了这个 `div` 元素。