浏览器宽度小于内容宽度，拖动滚动条后产生空白怎么处理

这种情况下，可以考虑使用CSS中的 `overflow-x` 属性来处理。将容器的 `overflow-x` 属性设置为 `scroll` 或 `auto`，这样会在容器宽度小于内容宽度时，自动显示水平滚动条，用户可以通过拖动滚动条来查看隐藏部分的内容。如果不需要水平滚动条，也可以将 `overflow-x` 属性设置为 `hidden`，这样容器宽度小于内容宽度时，隐藏超出容器宽度的部分。

另外，还可以通过响应式设计的方式来处理这个问题。当浏览器宽度小于容器宽度时，可以调整容器的宽度或者重新排列内容，以适应较小的屏幕尺寸。这样可以让页面在不同设备上都有良好的展示效果。

相关问题

vue2当内容超出隐藏滚动条并且可以手动拖拽滚动

可以使用CSS中的overflow属性来实现滚动条隐藏，同时使用JavaScript来实现手动拖拽滚动。

HTML代码：

<div class="scroll-container" ref="scrollContainer">
  <div class="content">
    <!-- 这里放置内容 -->
  </div>
</div>

CSS代码：

.scroll-container {
  position: relative;
  overflow: hidden;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
}

首先，将scroll-container元素的overflow属性设置为hidden，这样当内容超出容器宽度时，就会隐藏滚动条。

接着，将content元素的position属性设置为absolute，使得它相对于scroll-container元素进行定位。同时，将white-space属性设置为nowrap，使得子元素不会换行。

JavaScript代码：

export default {
  mounted() {
    const scrollContainer = this.$refs.scrollContainer;
    let isDragging = false;
    let startX = 0;
    let scrollLeft = 0;

    scrollContainer.addEventListener('mousedown', e => {
      isDragging = true;
      startX = e.pageX - scrollContainer.offsetLeft;
      scrollLeft = scrollContainer.scrollLeft;
    });

    scrollContainer.addEventListener('mouseleave', () => {
      isDragging = false;
    });

    scrollContainer.addEventListener('mouseup', () => {
      isDragging = false;
    });

    scrollContainer.addEventListener('mousemove', e => {
      if (!isDragging) return;
      e.preventDefault();
      const x = e.pageX - scrollContainer.offsetLeft;
      const walk = (x - startX) * 2;
      scrollContainer.scrollLeft = scrollLeft - walk;
    });
  }
}

在mounted钩子函数中，首先获取scroll-container元素的引用，然后定义一些变量用于记录拖拽状态和位置。

接着，为scroll-container元素绑定mousedown、mouseleave、mouseup和mousemove事件。当mousedown事件触发时，将isDragging设置为true，同时记录起始位置和滚动距离。当mouseleave和mouseup事件触发时，将isDragging设置为false。当mousemove事件触发时，根据鼠标移动的距离计算出需要滚动的距离，然后将scroll-container元素的scrollLeft属性设置为滚动距离即可。

这样，就可以实现手动拖拽滚动了。

360浏览器横向滚动条 拖不动

针对360浏览器横向滚动条拖不动的问题，可以尝试以下方法：

1. 使用CSS样式隐藏滚动条：

body::-webkit-scrollbar {
    display: none;
}

这段CSS代码可以隐藏Chrome浏览器的滚动条，但对于其他浏览器可能无效。

2. 使用overflow属性隐藏滚动条：

body {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: auto;
}

这段CSS代码可以隐藏滚动条，并且保留垂直滚动条，但横向滚动条仍然无法拖动。

3. 使用JavaScript解决滚动条问题：

document.addEventListener('DOMContentLoaded', function() {
    var body = document.body;
    body.style.overflowX = 'scroll';
    body.style.overflowY = 'hidden';
});

这段JavaScript代码可以将body元素的overflow-x属性设置为'scroll'，从而解决360浏览器横向滚动条无法拖动的问题。